How do I enable detailed logging for local testing with Playwright?

Answer

To enable detailed logging for local testing with @playwright/test, follow these steps:

1. Use the Playwright Inspector

Run your tests with the --debug flag:

npx playwright test --debug

This allows you to step through your test, view actionability logs, and edit the locator live.

2. Debug Tests in VSCode

Install the VS Code extension for live debugging. Set a breakpoint by clicking next to the test line, and the browser will pause at the breakpoint.

3. Debug a Specific Test

Run a specific test with the --debug flag:

npx playwright test example.spec.ts:9 --debug

Replace example.spec.ts:9 with the test file and line number.

4. Use Playwright Trace Viewer

For CI failures, use the Playwright trace viewer instead of videos and screenshots. It provides a full trace of your tests as a local Progressive Web App (PWA).

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Your test code here
});

These methods will help you get detailed logging information for local testing with Playwright.