Chapter 15 – Playwright Reporting and Test Artifacts

When tests run, visibility into what happened whether they pass or fail is crucial. Playwright provides rich reporting features and automatically captures artifacts such as screenshots, videos, and traces to help you debug and document your test results.

In this chapter, we’ll explore everything from basic reports to advanced test artifacts, including custom reporters, CI integrations, and best practices for debugging failed tests efficiently.

1. Why reporting matters

Reporting is how you visualize test results, identify flaky tests, and share progress with your team. Good reporting allows you to:

• Quickly spot failing tests.
• Understand root causes using screenshots and traces.
• Track test history in CI/CD environments.

Playwright includes several built-in reporters and artifact management options that make debugging effortless.

2. Built-in Playwright reporters

Playwright comes with multiple built-in reporters that display results in different formats.

Example command:

npx playwright test --reporter=list

Common built-in reporters:

Example: Using multiple reporters

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['html', { outputFolder: 'playwright-report', open: 'never' }],
    ['junit', { outputFile: 'results.xml' }]
  ]
});

This setup produces console output, a beautiful HTML dashboard, and a CI-friendly JUnit file.

3. HTML Report

After running tests, you can open the interactive HTML report:

npx playwright show-report

Features:

• View passed, failed, and flaky tests.
• Click a test to view logs, screenshots, and errors.
• View runtime, retries, and metadata.

Tip: Use the HTML report as your go-to tool for debugging locally.

4. JSON and JUnit Reports for CI/CD

For CI/CD systems like Jenkins, Azure DevOps, or GitLab, you can export machine-readable reports.

Example:

npx playwright test --reporter=junit,json

Then configure your CI tool to parse the JUnit or JSON output and display results in dashboards.

5. Screenshots on failure

Playwright can automatically capture screenshots when a test fails.

Example:

// playwright.config.js
export default {
  use: {
    screenshot: 'only-on-failure',
  },
};

Other options:

• 'on' – Capture a screenshot for every test.
• 'off' – Disable screenshots entirely.

You can also take screenshots manually:

await page.screenshot({ path: 'screenshots/home.png', fullPage: true });

6. Recording videos

Videos are one of the most useful debugging tools. You can record each test run automatically.

Example configuration:

export default {
  use: {
    video: 'retain-on-failure',
  },
};

Options:

• 'on' – Record all tests.
• 'off'– Disable videos.
• 'retain-on-failure' – Only keep videos of failed tests.

Playwright saves video files under test-results/ by default.

Manual video path example:

await page.video().path();

7. Trace Viewer the ultimate debugging tool

The Playwright Trace Viewer is a visual debugger that records everything that happens during a test DOM snapshots, network calls, console logs, and timings.

Record traces automatically

// playwright.config.js
export default {
  use: {
    trace: 'on-first-retry',
  },
};

Options:

• 'on' – Always record traces.
• 'off' – Disable traces.
• 'retain-on-failure' – Keep only failed tests.
• 'on-first-retry' – Record only when retrying flaky tests.

View a trace file

After a test run:

npx playwright show-trace trace.zip

This opens a visual interface where you can:

• Step through every test action.
• See screenshots before and after each step.
• Inspect network requests, console logs, and timing data.

Pro Tip: Always enable trace capture for CI runs, it’s invaluable for debugging.

8. Combining screenshots, videos, and traces

You can combine all three in your Playwright config for maximum visibility.

export default {
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
};

This setup ensures every failure has a screenshot, video, and trace for full context.

9. Custom reporters

You can build your own reporters to send results to Slack, databases, or dashboards.

Example custom reporter:

class MyReporter {
  onTestEnd(test, result) {
    console.log(`Test: ${test.title} - ${result.status}`);
  }
}

export default MyReporter;

Use it in your config:

export default {
  reporter: [['list'], ['./my-reporter.js']],
};

Custom reporters have hooks for events like:

• onBegin() – Called before the run starts.
• onTestEnd() – Called after each test.
• onEnd() – Called after all tests finish.

10. Integrating reports with CI/CD pipelines

In CI environments (like GitHub Actions, Jenkins, or GitLab), reports are critical for monitoring and debugging.

Example GitHub Action snippet:

- name: Run Playwright tests
  run: npx playwright test --reporter=html,junit

- name: Upload Playwright HTML Report
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

This stores Playwright’s HTML report as an artifact after every run.

11. Accessing logs and console output

You can capture console logs and network requests for deeper insight.

Example:

page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
page.on('requestfailed', req => console.log('FAILED REQUEST:', req.url()));

12. Saving and organizing test artifacts

Playwright saves all test artifacts (videos, traces, screenshots) under the test-results/ directory by default.

You can customize this location:

export default {
  outputDir: 'artifacts/',
};

Keep artifacts in versioned folders for CI pipelines.

Best practices for reporting and debugging

1. Always enable trace and screenshot capture in CI.
2. Use HTML reports for manual debugging.
3. Store reports as artifacts for later reference.
4. Combine multiple reporters (html, junit) for flexibility.
5. Build custom reporters for integrations like Slack or dashboards.
6. Use trace viewer for step-by-step replay of failed tests.

Exercise

Task 1: Run a test with the html reporter and open the report.
Task 2: Configure screenshots on failure and verify output.
Task 3: Enable trace viewer and inspect a failed test.
Task 4: Implement a custom reporter that logs test names.
Bonus: Integrate Playwright reports into your CI pipeline.

Cheat Sheet

Summary

In this chapter, you learned how to:

• Use Playwright’s built-in reporters (HTML, JSON, JUnit, etc.).
• Capture and review screenshots, videos, and trace files.
• Debug failed tests visually using the Trace Viewer.
• Build and integrate custom reporters.
• Configure reporting for CI/CD pipelines.

Playwright’s reporting and artifact system gives you complete visibility into every test run. Combined with videos, traces, and screenshots, it makes debugging fast, visual, and frustration-free.