How do I use Playwright's Test Generator to create regression tests?

Answer

Here's how you can create regression tests with Playwright's Test Generator.

Step 1: Use Test Generator

Start by pressing the 'Record' button. Once the recording stops, the 'Pick Locator' button will appear. Click on it and hover over elements in the browser window. You'll see the locator highlighted underneath each element. Click on the element you want to locate and edit it in the field to fine-tune it. You can also use the copy button to copy it and paste it into your code.

Step 2: View Generated Tests with Trace Viewer

After generating your tests, you can view them using Trace Viewer. It's a GUI tool that lets you explore recorded Playwright traces of your tests. You can go back and forward through each action of your test and visually see what was happening during each action.

Step 3: Configure playwright.config File for Tracing

By default, the playwright.config file will contain the configuration needed to create a trace.zip file for each test. Traces are set up to run on-first-retry. They will be run on the first retry of a failed test. Retries are set at 2 when running on CI and 0 locally. This means traces will be recorded only on the first retry of a failed test but not on the first run or second retry.

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

const config: PlaywrightTestConfig = {
  // other configs...
  use: {
    trace: 'on-first-retry',
  },
};

export default config;

Step 4: Download HTML Report from Artifacts Section

After running your tests, you can download the HTML report from the Artifacts section.

Step 5: View HTML Report Locally

To view the HTML report locally, run npx playwright show-report followed by the name of the extracted folder. This will serve up the report for viewing in your browser.

npx playwright show-report my-test-report

And that's it! You've created regression tests with Playwright. For more tips on efficient Playwright test scripts, check out this blog post.