Debugging, Reporting and CI in Playwright

Debugging, Reporting and CI is the seventh chapter of the free Playwright tutorial. It covers what happens after a test fails, and how tests run for a whole team.

What each lesson covers:

  • Debugging and Tracing: Read errors and call logs, step through tests with the Inspector, UI Mode and VS Code, log with test.step(), listen to the page console, and record traces you open in the Trace Viewer.
  • Reporting: The list, line and dot reporters, the HTML report and show-report, JSON and JUnit files for other tools, GitHub annotations, and custom reporters.
  • CI/CD and Scaling: A GitHub Actions workflow, CI settings in the config, secrets, workers, sharding with merged reports, Docker images, and which tests to run when.

Every test box runs in the Playwright lab in your browser, in TypeScript or JavaScript. The lab adds a Trace tab when you record traces, and a Report tab for the HTML report.

Lessons in this section

  1. Debugging and Tracing

    Reading Playwright error messages, call logs and code frames, the Playwright Inspector with --debug and page.pause(), headed runs and slow motion, UI Mode, the VS Code extension, logging with console.log, test.step and attachments, listening to page console messages and errors, recording and reading traces in the Trace Viewer, screenshots and videos on failure, and a checklist for flaky tests.

    • Read an error message, call log and code frame to find the cause
    • Pick the right debugging tool: Inspector, UI Mode, VS Code or traces
    • Record a trace and read its actions, snapshots, network and console
    • Catch page console errors in a test
  2. Reporting

    What test reports are for, the list, line and dot terminal reporters, the HTML report and show-report, JSON and JUnit reports for other tools, the GitHub Actions reporter, using several reporters at once, annotations, tags and attachments in reports, and writing a custom reporter.

    • Choose a terminal reporter for local runs and for CI
    • Open and read the HTML report
    • Write JSON and JUnit reports for other tools
    • Add annotations, tags and attachments that show in reports
  3. CI/CD and Scaling

    Why tests run on every push, a GitHub Actions workflow for Playwright, CI settings in the config (forbidOnly, retries, workers, reporters), environment variables and secrets, workers and parallel tests, sharding across machines and merging blob reports, running in Docker, other CI systems, and choosing which tests run when.

    • Explain what a CI pipeline does with Playwright tests
    • Read and adapt a GitHub Actions workflow for Playwright
    • Set CI-only options with process.env.CI
    • Speed up suites with workers, fullyParallel and sharding