🐞 Debugging — UI Mode & Trace Viewer

Debugging — UI Mode & Trace Viewer: The Playwright Trace Viewer works like the flight data recorder (black box) that aircraft accident investigators examine: it records every act

The Playwright Trace Viewer works like the flight data recorder (black box) that aircraft accident investigators examine: it records every action, every network request, every DOM snapshot, and every console log on a millisecond-precise timeline; hours after the crash, you can replay exactly what broke, where, and why. How was test debugging handled in Selenium? In Java, a failing test typically meant adding System.out.println() lines, sifting through log files, and re-running locally — and if the local environment didn't mirror CI, the problem never reproduced at all, the classic "breaks in CI but works on my machine" dead end. With Playwright Trace Viewer you run playwright show-trace trace.zip and a full timeline opens in your browser: which page the test was on, where each element was positioned, what the network request returned, and at which step the wait timed out — everything on one screen. The QA reality: failures that explode in CI at midnight but never reproduce locally (environment-specific flakiness) are among the most expensive time sinks in testing; Trace Viewer turns that category into something debuggable and cuts investigation time from hours to minutes.

In Selenium, when a test fails in CI you usually have only a stack trace and maybe one log line — answering "why" often means re-running the test locally over and over. Playwright gives you three dedicated tools for this: UI Mode (watch a test live, step by step), Trace Viewer (a recorded "time travel" replay after the fact), and screenshots/video (static evidence).

In Selenium projects, when a flaky test failed in CI, you usually had a stack trace in the TestNG/Allure report and maybe a manually-added screenshot — "what did the DOM actually look like at that exact moment" usually had no answer. Playwright's trace.zip stores the ENTIRE DOM snapshot, network requests, console logs, and a screenshot of every step at that moment — letting you "time travel" without re-running anything locally.

Quick Debug Commands

Playwright UI Mode — The Real Interface

The command npx playwright test --ui opens a dedicated window with a tree view of all test files on the left and a preview area in the middle.

Clicking a test lists every step (goto, fill, click, expect) one by one, marking each green ✓ or red ✗; the live browser view streams in the middle.

Time Travel — Click a Step

Clicking any past step instantly shows the page's exact appearance (DOM snapshot) AT THAT MOMENT — no need to re-run the test.

When a step is red ✗, the right panel shows the full error message, an "Expected vs Received" comparison, and a screenshot of the DOM at that moment — all together.

Trace Viewer — A Full Historical Record

Micro Lab: Playwright — Actions

Replace the TODO line with the critical line from the expected solution. This is not a real runtime; the goal is to reinforce writing the correct structure in a controlled way.

Step by Step: Playwright — Actions