Answer

Profiling Tests with Playwright

Playwright's Trace Viewer is your go-to tool for profiling tests. It lets you view test traces, inspect the log, source, and network at each step, and interact with a DOM snapshot.

To view a trace, click the trace icon next to the test name file name in Playwright's HTML report. Or, open the detailed view of the test, scroll to 'Traces', and click on a screenshot.

// Example code to generate a trace
import { test } from '@playwright/test';

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

For more on traces, check out the Trace Viewer guide.

Debugging Tests with Playwright

The VS Code extension for Playwright allows debugging tests within VS Code. It shows error messages, lets you create breakpoints, and live debug tests.

// Example code to debug a test
import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Your test actions here
  expect(await page.title()).toBe('Ray');
});

You can also debug tests live in VS Code by running them with the Show Browser option checked.

Generating Tests with Playwright

Playwright's CodeGen feature auto-generates new tests based on user actions, making it easy to get started with testing.