UI Mode

UI Mode (npx playwright test --ui) provides an interactive test runner with time-travel, locator picker, and integrated trace viewing — ideal while authoring tests.

UI Mode Features

See all tests in a sidebar, run individually or by file, watch browser actions live, and inspect DOM snapshots at each step.

Pick locator updates tests with recommended getByRole selectors. Filter by status, project, or search text.

npx playwright test --ui
npx playwright test --ui --project=chromium

UI Mode starts a local server — tests still hit your app baseURL.

UI Mode Workflow

1. Open UI Mode
2. Select spec file
3. Run test — watch steps
4. On fail: inspect timeline + DOM
5. Pick locator → copy to spec

Re-run failed tests without restarting terminal.
Time-travel slider scrubs through actions.
Shows network, console, attachments per step.
Works with projects — switch browser in UI.

UI Mode Shortcuts

Productivity tips in UI Mode.

Action	How
Open	`npx playwright test --ui`
Run one test	Click play on test row
Pick locator	Pick locator tool in toolbar
View trace	Automatic on failed step
Filter failures	Status filter in sidebar
Watch mode	Re-run on file save (extension)

UI Mode vs Inspector

Tool	Best For
UI Mode	Exploring suite, authoring tests
Inspector `--debug`	Stepping one failing test
Trace Viewer	CI failures, sharing with team

Watch Mode in UI

Enable watch in UI Mode to re-run the selected test on every file save — tight feedback loop while writing locators.

Common Mistakes

Only using headed run without UI Mode features.
Not using pick locator — hand-writing CSS instead.
Forgetting to save spec after pick locator copy.
Running UI Mode against wrong baseURL.

Key Takeaways

UI Mode accelerates test authoring and exploration.
Time-travel shows DOM at each action.
Pick locator teaches recommended selector patterns.
Combine with codegen for fastest first draft.

Pro Tip

Keep UI Mode open on second monitor while editing specs — re-run on save catches breaks immediately.