Read a Failing Test — Trace Viewer, Logs & trace.zip

1. Why tests fail

• Selector no longer matches (UI change).
• Async race condition.
• Network outage / mock not stubbed.
• Real bug in the application.

2. Step 1 — Run with trace on

Add to playwright.config.ts:

use: { trace: 'on-first-retry' }

Or run a single test with:

npx playwright test --trace on

3. Step 2 — Open the trace viewer

npx playwright show-trace trace.zip

The viewer shows: timeline, network waterfall, DOM snapshots, console output, and a filmstrip of screenshots.

4. Step 3 — Read the failure

• The red row in the timeline = the failing action.
• The action panel shows the exact selector, the expected vs actual value, and the error message.

5. Step 4 — File the bug

Use the bug-report template below. Include: steps to reproduce (the trace), expected vs actual, a screenshot from the filmstrip, and environment (browser, OS, commit SHA).

6. Hands-on task

• Open the supplied failing test bundle trace.zip (downloadable above).
• Identify the failing line, write a 1-paragraph bug report, and submit.

7. What's next

Continue to Module 02 / Lab 1: Role & label locators.