Playwright Debugger for Interactive Debugging Playwright supports a built-in debugger that allows you to pause your tests, inspect the state of the page, and step through the execution. This is especially useful for investigating issues during test execution.
To enable the Playwright debugger, you can use the debug() method or run Playwright with the PWDEBUG environment variable set to 1.
Example:
import { test, expect, chromium } from '@playwright/test';
test('Interactive Debugging', async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
// Trigger the debugger
page.on('console', (msg) => console.log(msg.text()));
page.on('pageerror', (err) => console.log(err.message));
// Example interaction
await page.goto('https://example.com');
await page.click('text=Sign up');
await page.fill('input[name="email"]', 'debug@example.com');
// Use the debug tool
await page.pause(); // The test will pause here for interactive debugging
await browser.close();
});
To resume after the pause() is triggered, you can interact with the test in your browser, inspect elements, and even modify the page state directly. You can use this technique to identify issues like incorrect page elements or unexpected behavior.