How to start with test automation — Playwright codegen

Is it possible to start playing with test automation without knowing any programming language? The answer is yes. As it may sound weird, it is really possible, and all the required knowledge can be achieved through experimentation — which, in my opinion, is the best way to learn. However, before we can start having fun, we need to have the following: basic knowledge of the command line (how to open it and navigate to a location), and how to install software (node.js is necessary).

But how to start? Playwright codegen can help you with that. Playwright codegen is a tool that can help you create automated browser tests for your website or web application. It works by recording your interactions with the website in a browser window and then generating code that can be used to reproduce those interactions. So, without further ado, let’s start with the configuration and the use case.

Before we can start having fun with codegen, we need to configure our environment. For this, we need to do the following:

1. Download and install the latest stable version of Node.js. Choose the installer for the platform you are working on. In most cases, the default installation is sufficient. Simply run the installer and click “Next” until the installation is complete.

2. Now, it would be good to have a nice and easy-to-use code editor. My suggestion is Visual Studio Code. It is easy, nice, and free. And as above, installing with the defaults should be enough.

3. Next, we can think about where the generated code should be stored. We can create a new directory, whatever name you like, and open it in our editor (Visual Studio Code — VSC). To do this, open VSC and select the “File” menu > “Open Folder” and open the directory you created.

4. Almost everything is ready, except for Playwright. To install Playwright, open the built-in terminal in VSC. Go to the Terminal menu and select New Terminal.

This action should cause the small panel at the bottom of VSC to be opened. This is the terminal that we will be interacting with. You can extend it to the whole window or keep it as it is.

5. Now, using this terminal, we need to install Playwright. To do that, paste the following command into the terminal and hit enter:

npm init playwright@latest

The command will install the latest version of Playwright. However, we will need to answer a couple of questions (use the tab key to switch between the answers):

The first question is related to the programming language in which we plan to write the tests. I suggest using JavaScript, as it is the easiest one. The second question is related to the place where the tests will be stored. The default is the tests directory.

Next one is related with the GitHub — leave it or set it to false (as it should be the default value).

And last but not least, question about the browsers which are necessary for our use (the default is true — so, leave it as it is).

After that, the installation should begin. If everything goes well, you should see a couple of useful commands at the end, along with the phrase “Happy hacking!”. :D

So, we are ready to start having fun! By the way, after the installation, the directory in which you should currently be should be filled with some additional files and directories:

• node_modules — there we have all libraries which will be used by our ‘environment’ — you shouldn’t touch that,
• tests — here is our default directory which we should store all recorded cases (we need to save/store it there manually),
• tests-examples — here we have some additional exemplary stuff delivered by the playwright team — if you type ‘npx playwright test’ — all exemplary tests should be executed in the ‘headless mode’ (you’ll not see the browser) — to see the browser you need to edit next file
• playwright.config.js — here are stored all configurations — to see the browser during tests execution add the following inside ‘use: {}’ — ‘headless: false,’

All right, let’s now try to use the command which I marked on green in the above screen — run the following command:

npx playwright codegen

After that, 2 windows should be opened:

• chromium browser in incognito mode,
• playwright inspector.

So, use this browser with the case that you would like to record and observe the inspector window. Take a look at the example below.

As you can see in the inspector window (on the right side), the code is automatically generated. So, the only thing that needs to be done now is to copy the content and paste it into the existing file inside the tests directory (the example.spec.js file should already be there), or create a new file, for example first-case.spec.js, inside this directory. This is how the file should look like:

The only things that are missing in the code are the ‘expect’ assertions, which are pretty important to validate the expectations. They are not necessary at the moment, as they can always be added later. However, it is always good to have some expect at the end of each test. Here you can read more about the assertions.

If you now type ‘npx playwright test’ into the command line, the three browsers should start. By default, three projects are enabled. To change that, open playwright.config.js and comment out (put ‘//’ at the beginning of each line) the following lines:

Properly commented lines should be greened out, like the lines below marked ones.

That’s it! You’re ready to play with the tests’ automation. Have fun and experiment. And remember, there is a lot more stuff with the automation that was not covered here, but you don’t need to know everything at the start. ;)