Debugging, Trace Viewer & Reporting

Guided briefing

Debugging, Trace Viewer & Reporting video demo

A practical screen-share style walkthrough for chapter 6, showing how the Playwright idea works in TypeScript and Java.

Briefing focus

Trace Viewer — the superpower

This is a structured lesson briefing. Real video/audio can be added later as a media source.

Estimated time

10 min

1. 1Trace Viewer — the superpower
2. 2Reporters
3. 3Debugging locally

Transcript brief

When a test fails, Playwright gives you a time-travel debugger, rich HTML reports, and zero-config CI integration. The video brief explains the mental model first, then demonstrates the workflow using the course code samples, and finishes with reliability checks you can apply in CI.

Key takeaways

• Translate the concept into a maintainable Playwright test.
• Understand the TypeScript and Java equivalents without changing the test intent.
• Avoid the common source of flaky or slow end-to-end tests for this topic.

Trace Viewer — the superpower

Every trace is a time-travel recording: DOM snapshots, network log, console, source code and screenshots — all in a single zip. Open it once and you rarely need to reproduce a failure locally again.

// playwright.config.ts
use: {
  trace: 'on-first-retry', // or 'retain-on-failure'
}

// Locally, reproduce with --trace on
npx playwright test --trace on

# Open any generated trace
npx playwright show-trace test-results/.../trace.zip

Reporters

Debugging locally

• npx playwright test --debug — opens the Playwright Inspector with step-through and pick-locator tools.
• await page.pause() — drops into the inspector at that exact line.
• PWDEBUG=1 — env var that forces the inspector for any run.
• codegen — npx playwright codegen https://example.com records clicks into a test skeleton.