A Front-End Web Developer’s Guide to Testing/

...

/

Playwright’s Reporting, Runners, Viewer, Configuration, and CI

Playwright’s Reporting, Runners, Viewer, Configuration, and CI

Learn about Playwright’s test reporting, tracing capabilities, and advanced configurations, including integration with CI tools like GitHub Actions.

We'll cover the following...

Playwright test reporting

In stark contrast to Cypress and Selenium, which provide nice test reports with flakiness filtering and more either through plugins, such as Allure, or their own dashboard, for Playwright, test reporting is not advanced. Several test reporters can be used out of the box. However, they’re either console outputs with pass-and-fail results or JUnit test reports. Upon running the test with —-reporter=junit, the output report of the execution will be saved in a results.xml file: 

npx playwright test --reporter=junit

Let’s run a simple test in Playwright and see the output report in XML format in the terminal below:

const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title to contain a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // Expect an attribute to be strictly equal to the value.
  await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');

  // Expect an element to be visible.
  await expect(page.locator('text=Community').first()).toHaveAttribute('href', '/community/welcome');
  
  await page.click('text=Get Started');

  // Expect some text to be visible on the page.
  await expect(page.locator('text=Introduction').first()).toBeVisible();
});
Playwright test report output in a JUnit XML format

As the Playwright framework evolves, we expect the test reporting features will also mature, either through built-in reporters or better integrations that can provide better and actionable test data.

Playwright test runners

Like the Selenium and Cypress frameworks, Playwright also integrates and can be easily used with many JavaScript test runners, including Mocha, Jest, Jasmine, and AVA. Mocha is the most well-known and commonly used test runner along with Jest; however, Playwright offers its own test runner that gets installed within the initial installation steps. To use the built-in Playwright test runner, we have to specify the following at the beginning of our JavaScript file: 

const { test, expect } = require('@playwright/test');

If we wish to use Jest and Jasmine in our test code, which allows us to use methods such as expect(), we need to specify the following at the beginning of our source code file:

Press + to interact
const {chromium} = require('playwright'); 
const expect = require('expect');

For Mocha to be used in our ...