← Back to libraryQuestion 179 of 273
🎭PlaywrightBeginner

Debugging Tools (Inspector, UI Mode, pause, headed)

📌 Definition:

Playwright offers interactive debugging tools for development: UI Mode for a visual, time-travel test runner; the Inspector for stepping through actions and picking locators; page.pause() to stop mid-test; and --headed/--debug flags to watch execution in a real browser.

📖 Detailed Explanation:

npx playwright test --ui opens UI Mode: a panel showing every test, live DOM snapshots per step, the ability to watch files and re-run on save, and time-travel through actions — the primary tool for authoring and fixing tests. PWDEBUG=1 or --debug launches the Playwright Inspector, which pauses before each action, lets you step through, and highlights the exact element a locator resolves to. page.pause() inserts a breakpoint anywhere and opens the Inspector at that point, so you can try locators live in the console. --headed simply runs in a visible browser. The codegen tool (npx playwright codegen) records your clicks into runnable test code with suggested locators — great for bootstrapping and for learning the recommended locator style. These make Playwright far more approachable to debug than editing-and-rerunning blind.

🔑 Key Points:
  • UI Mode (--ui): visual runner with per-step DOM snapshots, watch mode, time travel
  • Inspector (--debug / PWDEBUG=1): step through actions, highlight resolved locators
  • page.pause() sets a live breakpoint and opens the Inspector to try locators
  • --headed runs in a visible browser to watch behavior in real time
  • npx playwright codegen records interactions into code with suggested locators
🌍 Real-World Example:

An engineer writing a new test isn't sure which locator uniquely matches a menu item. They add page.pause(), run headed, and use the Inspector's locator picker to hover the element — Playwright suggests getByRole('menuitem', { name: 'Billing' }), which they paste straight into the test.

📎 Code Example:
# Visual runner (best for authoring/fixing tests)
npx playwright test --ui

# Step through with the Inspector
npx playwright test --debug
# or: PWDEBUG=1 npx playwright test tests/login.spec.ts

# Watch it run in a real browser
npx playwright test --headed --project=chromium

# Record interactions into runnable code with good locators
npx playwright codegen https://www.qapractice.com/practice-login-form

// Set a live breakpoint inside a test
// await page.pause();
🎯 Scenario-Based Interview Question:

Scenario: A junior tester is stuck writing a locator for a deeply nested element and has been editing-and-rerunning for an hour. Which Playwright tools do you point them to, and why is that faster?