How To Use Playwright Codegen For Test Recording

In my previous posts, I have covered how to install Playwright using the command line and I’ve also discussed the process using the VSCode extension. In this post, I will cover how to write and execute Playwright Javascript tests using the Playwright Codegen feature.

What is Codegen Playwright?

Playwright Codegen is a test recorder tool provided by Playwright to record user interactions with the application and automatically generate the code for those actions. This code can be exported in any supported language and used in our test script.

How to Use Playwright Test Generator (Codegen)

When Playwright Codegen launched, it opened two windows

1. A browser window to interact with the website
2. Playwright inspector window to record the interactions. By using this inspector we can start and stop recording, export the generated code and add basic assertions(Assertions supported by Playwright Version 1.40).

Testing Scenario:

1. Open the Browser and navigate to the OrangeHRM demo site.
2. Fill in User Details and Click Sign in.
3. Verify Dashboard is opened or not.

Open the project in the Visual Studio code editor and open a new terminal. Execute the below command on the terminal.

npx playwright codegen https://opensource-demo.orangehrmlive.com/web/index.php/auth/login

Upon executing this command will start the Playwright inspector window and also open the browser window with the given URL.

Now perform the actions like entering user details and password and click on the Login button. A test script is generated in the Playwright Inspector.

Since Playwright 1.40 now we can add assertions like “Assert Visibility”, “Assert Text” and “Assert Value”. To utilize this feature first click on the desired assertion and then hover over the element. Assertion will be added to the script.

Stop or Pause recording, copy this script and save it under the tests folder, naming it “demoTest.spec.js”.

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
  
  await page.getByPlaceholder('Username').click();
  await page.getByPlaceholder('Username').press('CapsLock');
  await page.getByPlaceholder('Username').fill('Admin');
  await page.getByPlaceholder('Password').click();
  await page.getByPlaceholder('Password').fill('admin123');
  await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
  await expect(page.getByRole('button')).toContainText('Login');
  await expect(page.getByPlaceholder('Username')).toHaveValue('Admin');
  await page.getByRole('button', { name: 'Login' }).click();
});

Understand the Playwright Codegen Script

1. First, we are importing the {test, expect} objects from the ‘@playwright/test’ module to define the structure of test cases, set up test fixtures, run tests, use Assertions to validate the expected and actual outcome and manage test lifecycle.

2. In the next step we have defined the test structure with the page fixture.

3. Our next step is to navigate to the desired URL which we have achieved using the page. goto(URL) function.

4. Once the app is open we need to identify the locators to interact with DOM. The playwright supports multiple locator strategies to interact with web elements. With the help of locators enter user details and click the login button.

5. Following a successful login, the next step is to verify the outcome. expect() is a part of the testing assertion library which is used to verify the visibility of the Login button.

6. We have used the ‘await’ keyword before every step to achieve the synchronization and tell the JavaScript runtime to pause the execution of the script until the promise returned by that function is resolved.

Execute Test Script

Navigate to the playwright.config.js file and add your test directory(Where you have written your test scripts) inside it.

testDir: './tests',

To execute this test use the below command.

npx playwright test  demoTest.spec.js 

Playwright by default executes the tests on the Chromium browser in headless mode when no specific browser is defined. If we want test execution in ui mode then use below mentioned command.

npx playwright test demo.spec.js --ui

The --ui flag is used to select the user interface (UI) for running the tests.

Playwright UI mode is very helpful in debugging. Here we can see each test step, we can also see logs, errors, network calls etc.

npx playwright test --headed

We can execute all our tests in headed mode using the above-mentioned command.

How To View Playwright Report

Playwright provides HTML reports by default but we can change it with another supported reporter as well. In this section, we will configure the basic HTML report.

Go to the playwright.config.js file and add the below configuration if not added already.

module.exports = defineConfig({
  testDir: './tests',
  
  retries : 1,
  expect : {
    timeout: 20 * 1000,
  },
  
 reporter: 'html',
 use: {
     screenshot:"on"
     
     headless : true,
  
  },

 });

Save the configurations and execute the test script. In the configuration, we have provided the test directory where our test files are located. I have added the retries count 1 so in case of failure, failed test cases will be retried again.

We want to execute it in headless mode hence value is ‘true’. I also enabled screenshots. Once execution is successful then execute the command:

npx playwright show-report

A basic HTML report will be generated and served with screenshots attached. We can customize the reports by configuration changes. If we don’t want to capture a screenshot every time then we can change it to ‘retain on failure’ or we can stop capturing screenshots by giving the value ‘off’.

screenshot: 'retain-on-failure',

Playwright Supported Reporters

Apart from HTML reporter Microsoft Playwright supports the below-mentioned reporters.

1. Dot Reporter
2. Line Reporter
3. JUnit Reporter
4. JSON Reporter
5. List Reporter
6. GitHub Actions annotations

Third-party reporters like Report Portal, Allure Reporter, and Monocart Reporter can also be integrated with the Playwright test automation tool.

Playwright Trace Viewer

Playwright provides a very useful and powerful GUI tool named “Trace Viewer ” to help users easily debug the test scripts along with the screenshots navigation, console logs and network calls.

Traces can easily be generated by providing some configuration in the Playwright configuration file. Once the trace files are generated in the form of Zip then we can export them and trace back the issues.

How to generate trace in Playwright

To generate a trace go to playwright. config.js file, open it and under the use section add the property. There are multiple options available for trace like [off, on,retain-on-failure,on-first-retry,on-all-retries] etc. As per your need, we can provide any of the available value. Save the configuration and execute the script.

use: {
     screenshot:"on"
     trace : 'on', //trace generation
     headless : true,
  
  },

After successful execution trace file will be generated under the test-result folder. We can see this file using the below command.

npx playwright show-trace pathofthetracefile

Alternatively, we can open the trace file using statically hosted Trace Viewer. Upload the trace file here and debug the issues.

Conclusion

It is very easy to work with Microsoft Playwright if you are familiar with any other test automation tool like Cypress. Installation and setup are very easy, and lots of customization options are also available for reporting, cross-browser testing, parallel execution and many more features. You can visit the official documentation for detailed information.