Config and CI

Debugging Playwright Tests

Debug Playwright tests with trace viewer, inspector, screenshots, videos, console logs, network details, and failure-focused investigation steps.

Debugging Tools

Playwright debugging is about seeing what the browser saw at the moment of failure. Use the right tool based on the failure type.

  • Playwright Inspector for stepping through a test.
  • Trace Viewer for full action timeline.
  • Screenshots and videos for visual state.
  • HTML report for failure summary.
  • Console and network logs for application errors.

Trace Viewer

Trace Viewer is the best first stop for most CI failures because it shows actions, locators, snapshots, network, console, and attachments in one place.

npx playwright show-trace trace.zip

Screenshots and Videos

Screenshots show the final failed state. Videos show how the page reached that state. Use them when a failure is visual or timing-related.

Common Failure Patterns

  • Locator matched the wrong element.
  • Element was hidden, disabled, or covered.
  • Test data already existed or was missing.
  • The app had a console or network error.
  • CI was slower than local and the test waited for the wrong condition.

Debugging Checklist

  1. Read the exact error message.
  2. Open trace or report.
  3. Check the locator snapshot.
  4. Check network and console errors.
  5. Replace weak waits or selectors.
  6. Run the smallest failing test again.
☰