Playwright Documentation

The Playwright Trace Viewer provides a comprehensive interface for debugging tests by visualizing actions, snapshots, and logs. Key features include:

• Actions Tab: View the locator used for every action, its duration, and the corresponding DOM snapshot. You can use 'Before' and 'After' tabs to see the state change.
• Screenshots: A film strip (screencast) allows you to visually navigate through the test execution. Hovering over the film strip provides a magnified view.
• Snapshots: If enabled, Playwright captures complete DOM snapshots for each action. Snapshots are categorized as:
  • Before: At the time the action is called.
  • Action: At the moment of the performed input (useful for seeing exact click positions).
  • After: After the action completes.
• Source: Highlights the specific line of code in your test file corresponding to the selected action.
• Call: Displays metadata about the action, such as duration, the locator used, strict mode status, and keys used.
• Log: Provides a detailed execution log of Playwright's internal operations (e.g., scrolling, waiting for visibility, stability).
• Errors: Displays error messages and highlights the failure point on the timeline and in the source code.
• Console: Shows logs from both the browser and the test file. You can filter these logs by selecting a specific action or a time range on the timeline.
• Network: Displays all network requests made during the test. You can sort by method, status, duration, etc., and inspect headers and bodies. Filtering is available via the timeline or by selecting an action.
• Metadata: Shows test environment details like browser type, viewport size, and total duration.

A BrowserContext represents an isolated, independent browser session. It allows you to run multiple sessions in parallel without them sharing state (like cookies or local storage).

Key characteristics:

• Isolation: Each context is independent. If a page opens a popup via window.open, that popup belongs to the same BrowserContext as the parent page.
• Non-persistence: Using browser.newContext() creates a non-persistent context that does not write browsing data to disk (similar to an incognito window).

To use a context, create it from a Browser instance, open pages within it, and close the context when finished to clean up resources.

// Create a new incognito browser context
const context = await browser.newContext();

// Create a new page inside context.
const page = await context.newPage();
await page.goto('https://example.com');

// Dispose context once it's no longer needed.
await context.close();

Playwright component testing allows you to test web components in isolation by running regular Playwright end-to-end tests against a story gallery page served by your own development server.

Unlike previous experimental packages, this approach is framework-agnostic and uses your existing build pipeline (Vite, Webpack, Next.js, etc.). It relies on the fixtures.mount() fixture from @playwright/test to drive the tests.

Key Benefits:

• Real Browser Environment: Tests run in Node.js while components run in a real browser, enabling real clicks, layout execution, and visual regression.
• Pipeline Ownership: You use your own dev server, plugins, aliases, and CSS.
• Stability: Uses standard @playwright/test imports and documented fixtures without needing experimental framework-specific packages.

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

test('click should expand', async ({ mount }) => {
  const component = await mount('components/Expandable/Stateful');
  await component.getByRole('button').click();
  await expect(component.getByTestId('expanded')).toHaveValue('true');
});

Fixtures follow a specific lifecycle involving a setup phase, an await use() call, and a teardown phase. The execution order is governed by these rules:

• Dependency Order: If fixture A depends on fixture B, B is always set up before A and torn down after A.
• Lazy Execution: Non-automatic fixtures are executed lazily, meaning they are only set up when a test or hook explicitly requests them.
• Scoping:
  • Test-scoped fixtures are torn down after each individual test.
  • Worker-scoped fixtures are torn down only when the worker process executing the tests is shut down.
• Automatic Fixtures: Automatic fixtures (auto: true) are set up before tests and hooks. Automatic worker fixtures are set up before anything else, while automatic test fixtures are set up before tests and beforeEach hooks.

import { test as base } from '@playwright/test';

const test = base.extend<{ 
  testFixture: string, 
  autoTestFixture: string 
}, {
  workerFixture: string,
  autoWorkerFixture: string
}>({
  // Worker-scoped fixture
  workerFixture: [async ({ browser }) => {
    // setup
    await use('workerFixture');
    // teardown
  }, { scope: 'worker' }],

  // Automatic worker-scoped fixture
  autoWorkerFixture: [async ({ browser }) => {
    await use('autoWorkerFixture');
  }, { scope: 'worker', auto: true }],

  // Test-scoped fixture
  testFixture: [async ({ page, workerFixture }) => {
    await use('testFixture');
  }, { scope: 'test' }],

  // Automatic test-scoped fixture
  autoTestFixture: [async () => {
    await use('autoTestFixture');
  }, { scope: 'test', auto: true }],
});

The CDPSession class allows you to communicate directly with the Chrome DevTools Protocol (CDP). This is useful for accessing low-level browser features not exposed by the standard Playwright API.

To use it:

1. Create a new session from a BrowserContext using newCDPSession(page).
2. Use session.send(method, params) to call protocol methods.
3. Use session.on(eventName, callback) to subscribe to protocol events.

Refer to the DevTools Protocol Viewer for a full list of available methods and events.

const client = await page.context().newCDPSession(page);
await client.send('Animation.enable');
client0.on('Animation.animationCreated', () => console.log('Animation created!'));
const response = await client.send('Animation.getPlaybackRate');
console.log('playback rate is ' + response.playbackRate);
await client.send('Animation.setPlaybackRate', {
  playbackRate: response.playbackRate / 2
});