All topics·Advanced·2 / 24

UI Mode

UI Mode is how I debug failing tests locally. It's a visual runner with time travel — I hover over any action in the timeline and see exactly what the DOM looked like at that moment. Watch mode auto-reruns tests when I save the file. It's faster than running tests from the terminal and re-reading logs.

Launching UI Mode

One command opens a browser window with all your tests. From there you run, filter, and debug without touching the terminal again.

bash

npx playwright test --ui

# Для Docker і GitHub Codespaces — пробрасувати на 0.0.0.0
npx playwright test --ui-host=0.0.0.0 --ui-port=8080

Running and filtering tests

The left sidebar shows all test files and describe blocks. Click the triangle next to any item to run just that. Filter by name, @tag, project (Chromium/Firefox/WebKit from your config), or status (passed/failed/skipped).

Watch mode: click the eye icon next to a test to auto-rerun it every time you save the test file. I keep this on during development — edit code, save, see the result immediately.

Time travel — see DOM at any moment

This is the killer feature. After running a test, hover over any action in the Actions panel on the left. The DOM snapshot on the right updates to show exactly what the page looked like at that moment — before and after the action. Use the Before/After tabs to see what changed.

The timeline at the top shows the full test visually — blue for actions, green for navigations. Drag the slider to scrub through time. When a test fails, there's a red marker exactly where the failure happened.

Pick Locator — find the right locator interactively

When I'm not sure what locator to use for an element, I click Pick locator in UI Mode and hover over the DOM snapshot. Playwright shows the recommended locator for whatever I hover on. Click to pin it, tweak it in the input field, and copy when it looks right.

Debugging tabs — Console, Network, Errors, Log

Each action has four tabs worth knowing:

Errors — error messages with the exact line of code. Log — Playwright's internal log: what it was waiting for, whether actionability checks passed, how long each step took. Console — browser console output (not test output). Network — every request with status, size, timing.

The Source panel shows the test code and highlights the current line as you hover actions. The Open in VSCode button jumps directly to that line.

Take the quiz