← Back to libraryQuestion 185 of 273
🎭PlaywrightIntermediate

Reporters & Test Reports (HTML, JUnit, CI)

📌 Definition:

Reporters control how results are presented. Playwright ships list/line/dot reporters for the console, a rich interactive HTML report, machine-readable JUnit/JSON for CI dashboards, a blob reporter for sharded runs, and a github reporter for inline PR annotations. Multiple reporters can run at once.

📖 Detailed Explanation:

The HTML reporter is the headline: an interactive page grouping tests by file and project, with embedded traces, screenshots and error context for each failure — you open it with npx playwright show-report. For CI systems that ingest results (Jenkins, Azure DevOps, GitLab), the junit reporter emits XML those dashboards parse into pass/fail trends. The blob reporter is essential for sharding: each shard emits a blob, and merge-reports combines them into one HTML report so a split run still yields a single view. The github reporter surfaces failures as inline annotations on the PR. You configure an array of reporters, commonly [['blob'], ['github']] on CI and [['html']] locally. Choosing the right reporters makes results actionable for both humans and machines.

🔑 Key Points:
  • Console: list/line/dot; interactive HTML report via show-report
  • junit/json reporters feed CI dashboards and trend analysis
  • blob reporter + merge-reports = one HTML report from a sharded run
  • github reporter adds inline failure annotations on PRs
  • Configure multiple reporters at once; branch local vs CI in config
🌍 Real-World Example:

CI emits JUnit XML that the org's Azure DevOps dashboard turns into a pass/fail trend chart for managers, while the same run also produces a merged HTML report with embedded traces that engineers open to debug — one test run, two audiences served by two reporters.

📎 Code Example:
// playwright.config.ts (excerpt) — different reporters per environment
export default defineConfig({
  reporter: process.env.CI
    ? [['blob'], ['junit', { outputFile: 'results/junit.xml' }], ['github']]
    : [['html', { open: 'never' }], ['list']],
});

# Open the interactive HTML report locally
npx playwright show-report

# Merge sharded blob reports into a single HTML report
npx playwright merge-reports --reporter=html ./all-blob-reports
🎯 Scenario-Based Interview Question:

Scenario: After enabling sharding across 5 CI jobs, each job produces its own tiny HTML report and managers complain there's 'no single view of the run', while the CI dashboard shows no trend data. How do you fix the reporting?