How To Save Multiple HTML Reports In Playwright

Playwright allows you to save your test results in an HTML report.

The HTML report serves as a dashboard in which a list with the results of all your tests is available.

You can also click on each test to see more details of the test run, such as the video or the entire trace of the test run.

You need to add the reporter property in your playwright.config to enable your HTML report.

// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: [ ['html'] ],
};
export default config;

Playwright's default HTML reporter settings creates a folder named "playwright-report" and saves the HTML report in this folder.

If you want to save the HTML report into a custom folder, you can change your playwright.config.ts to something like this.

// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: [ ['html', { outputFolder: 'my-report' ] ],
};
export default config;

This code example saves your report into ./playwright-report/my-report

Now Playwright creates a folder with the name "my-report" and saves the report in this folder. The problem is that the report is overwritten every time you start the tests, so you only have the most recent report but not the one from the test runs before.

To prevent Playwright from overwriting the report, you can pass a dynamic folder name to the outputFolder property.

// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: [ ['html', { outputFolder: 'playwright-report/' + (new Date()).toISOString()}] ],
};
export default config;

This code example will create a new playwright-report folder for every test run. The folder name will be the timestamp of the start of your tests.

How To Save Multiple HTML Reports In Playwright

More from this blog

Hover Letter Wave Effect In CSS

Underline Animation With CSS Only

3D Tilt Effect And Text Outline Effect With CSS

How To Manage Your State In SolidJS

Command Palette

More from this blog