Playwright SOP

Appearance

Usage ​

Minimal example ​

The pattern is: navigate, interact, assert. Save this as tests/example.spec.ts:

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // Assert the page title contains "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // Click the "Get started" link
  await page.getByRole('link', { name: 'Get started' }).click();
  // Confirm navigation landed on the Installation heading
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Core API patterns ​

typescript
await page.goto('https://example.com');

Click an element ​

typescript
await page.getByRole('button', { name: 'Submit' }).click();

Fill a form field ​

typescript
await page.getByLabel('Email').fill('user@example.com');

Assert text is visible ​

typescript
await expect(page.getByText('Welcome')).toBeVisible();

Take a screenshot ​

typescript
await page.screenshot({ path: 'screenshot.png', fullPage: true });

Generate a PDF (Chromium only) ​

typescript
await page.pdf({ path: 'page.pdf', format: 'A4' });

Running against a specific browser ​

Set projects in playwright.config.ts or pass --project on the CLI:

bash
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Headed mode (see the browser window) ​

bash
npx playwright test --headed

Debug interactively ​

bash
npx playwright test --debug

Opens Playwright Inspector alongside the browser so you can step through each action.