Playwright Debugging Techniques with VS Code Inspector and Traces

Master Playwright debugging using VS Code integration, trace viewer, page inspector, and advanced logging strategies for troubleshooting test failures. This guide provides step-by-step Playwright patterns to handle this scenario reliably.

Introduction

Robust automation requires handling domain-specific patterns effectively. This article covers playwright debugging techniques with vs code inspector and traces with production-ready Playwright code.

Architecture Overview

graph TD
    Failure["Test Failure"] --> Retry["First Retry"]
    Retry --> Trace["Trace Recorded"]
    Trace --> Viewer["Trace Viewer"]
    Viewer --> Debug["Step-by-step Replay"]

Implementation Guide

// Enable trace recording for all tests
// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry', // Record trace on first retry
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

// Or force trace in specific test
test('debug this test', async ({ page }, testInfo) => {
  await testInfo.attach('trace', { path: testInfo.outputDir + '/trace.zip' });
});

Run Your Tests

npx playwright test --grep "Playwright Debugging Techniques"
npx playwright test --ui

Reference Table

Best Practices

Common Mistakes

Frequently Asked Questions

How to open Playwright trace viewer?

Run npx playwright show-report or npx playwright show-trace trace.zip to view recorded traces.

What is Playwright UI Mode?

UI Mode (--ui flag) is an interactive test runner that shows tests, locators, and actions in real-time.

How to debug a specific test in VS Code?

Use the Playwright VS Code extension to right-click a test and select 'Debug Test' to run with breakpoints.

How to capture traces only on failure?

Set trace: 'on-first-retry' in playwright.config.ts to record only when tests fail and retry.

How to use page.pause() for debugging?

Add await page.pause() in your test to freeze execution and open the Playwright Inspector.

Summary

Master Playwright debugging using VS Code integration, trace viewer, page inspector, and advanced logging strategies for troubleshooting test failures. Apply these patterns to build a reliable, maintainable automation suite for your specific use case.

Related Articles