36. Rich HTML Reporting & Root-Cause Failure Diagnosis

Playwright HTML Reporter

Playwright comes with an interactive, zero-dependency HTML report generator:

# View last test execution report:
npx playwright show-report

Features of the HTML Report:
1. Filter by Status: Passed, Failed, Flaky, Skipped.
2. Filter by Project: Chromium, Firefox, WebKit.
3. Step-by-Step Breakdown: Every action with millisecond timing.
4. Call Log: Complete actionability log showing what Playwright waited for.
5. Direct Trace Link: Click one button to launch Trace Viewer.

---

Multiple Reporters in CI

Configure both visual HTML and machine-readable JUnit/JSON outputs:

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

---

Reading Actionability Call Logs

When an assertion or action fails, Playwright prints a comprehensive log:

locator.click: Timeout 5000ms exceeded.
Call log:
  - waiting for getByRole('button', { name: 'Save' })
  - locator resolved to <button disabled>Save</button>
  - unexpected value: element is disabled

Notice how this instantly tells you the problem: the button exists, but was disabled!