How do I use reporters and annotations in Playwright to customize my HTML report?

Answer

Customizing HTML Report with Reporters and Annotations in Playwright

To customize your HTML report in @playwright/test, you can use reporters and annotations.

Using Reporters

Reporters generate reports with details about each test run. The HTML Reporter is one such reporter that generates an HTML file with information about your tests. To use the HTML Reporter, first, install it:

npm install -D playwright-html-reporter

Then, update your playwright.config.ts file to include the reporter:

import { PlaywrightTestConfig } from '@playwright/test';
import { HtmlReporter } from 'playwright-html-reporter';

const config: PlaywrightTestConfig = {
  reporter: [
    'list',
    [HtmlReporter, { outputFile: 'results/report.html', timeout: 0 }],
  ],
  // ... other configurations
};

export default config;

Now, when you run your tests, an HTML report will be generated in the results folder.

Using Annotations

Annotations add additional context or metadata directly into your code. They are comments that are ignored by JavaScript engines but picked up by tools like linters or IDEs.

In Playwright, you can use annotations to provide extra information about your tests. For example, you can use the @tag annotation to organize your tests:

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

test('@tag(smoke) Check the homepage', async ({ page }) => {
  await page.goto('https://ray.run/');
  // ... other test steps
});

This annotation helps you filter and run specific tests based on their tags. To run tests with the smoke tag, use the following command:

npx playwright test --tag=smoke

In summary, you can customize your HTML report in Playwright using reporters and annotations. Reporters generate detailed reports, while annotations add extra context or metadata to your tests.