To customize your HTML report in @playwright/test, you can use reporters and annotations.
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.
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.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].