What is the Playwright Inspector and Playwright UI Mode?

The Playwright Inspector is a step-through GUI debugger for Playwright tests.

Launch Inspector

# Debug all tests
npx playwright test --debug

# Debug a specific file
npx playwright test login.spec.ts --debug

# Debug a specific test
npx playwright test -g "login with valid credentials" --debug

Add a Pause in Your Test

test('debug this', async ({ page }) => {
  await page.goto('/login');

  // Execution pauses here — Inspector opens
  await page.pause();

  await page.getByLabel('Email').fill('user@test.com');
  // ... continue debugging
});

Inspector Features

• ✓Step Over — execute next line
• ✓Continue — run until next pause/breakpoint
• ✓Pick Locator — click any element to generate its locator
• ✓Action Log — list of all actions and their timing
• ✓Live CSS Selector input — test locators in real time
• ✓Source code panel — current line highlighted

UI Mode is a fully interactive test runner with a graphical interface — great for developing and debugging tests.

Launch UI Mode

npx playwright test --ui

UI Mode Features

1. ✓Test tree sidebar — all tests organized by file and describe block
2. ✓Run/filter controls — run all, run selected, filter by status
3. ✓Live trace viewer — DOM snapshots at each step as you watch the test
4. ✓Watch mode — re-runs tests when files change
5. ✓Time travel — click any action to see the DOM at that exact moment
6. ✓Network tab — all HTTP requests per test
7. ✓Console tab — browser console output

Use UI Mode for Development

# Run in watch mode — tests re-run on file save
npx playwright test --ui

# From UI Mode you can:
# - Filter tests by tag: @smoke, @regression
# - Re-run failed tests only
# - Pin tests to always show at top
# - View video, screenshots, and traces inline