Skip to content
>_devvkit
$devvkit learn --librarie playwright-guide

Playwright Guide

[testing][e2e][browser]
JavaScript / TypeScript
Install
npm install -D @playwright/test
npx playwright install

Playwright speaks browser native protocols — faster and more reliable than Selenium.

Auto-waiting eliminates flaky waitForTimeout calls. Elements must be visible and stable.

Supports Chromium, Firefox, WebKit. Trace Viewer shows frame-by-frame test replay.

Setup

Basic test— Navigate and check title.
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Locators & Actions

Click button— Find and click.
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByTestId('submit-btn').click();
Type into input— Fill a text input.
await page.getByLabel('Email').fill('alice@example.com');
await page.getByPlaceholder('Name').fill('Alice');

Assertions

Visible assertion— Check visibility.
await expect(page.getByText('Success')).toBeVisible();
await expect(page.getByText('Loading')).toBeHidden();
Wait for URL— Wait for navigation.
await page.getByText('Continue').click();
await page.waitForURL('**/dashboard');

Network

Intercept API— Mock a response.
await page.route('**/api/users', async route => {
  await route.fulfill({ json: [{ id: 1, name: 'Mocked' }] });
});
Wait for response— Wait for API call.
const res = page.waitForResponse('**/api/submit');
await page.getByRole('button').click();
const response = await res;
expect(response.ok()).toBeTruthy();

Fixtures

Custom fixture— Reusable auth fixture.
export const test = base.extend<{ loggedInPage: Page }>({
  loggedInPage: async ({ page }, use) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('admin@example.com');
    await page.getByRole('button').click();
    await use(page);
  },
});