Playwright Testing Skill

Quick Start

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

test('example test', async ({ page }) => {
    await page.goto('https://example.com');
    await expect(page).toHaveTitle(/Example/);
    await page.getByRole('button', { name: 'Submit' }).click();
    await expect(page.getByText('Success')).toBeVisible();
});

Project Setup

# Initialize new project
npm init playwright@latest

# Install in existing project
npm install -D @playwright/test
npx playwright install

Core Concepts

Locators (Prefer User-Facing)

page.getByRole('button', { name: 'Submit' })  // Best: accessibility
page.getByText('Welcome')                      // By visible text
page.getByLabel('Email')                       // Form fields
page.getByTestId('submit-btn')                 // data-testid fallback
page.locator('css-selector')                   // Last resort

Assertions (Auto-Retry)

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(page).toHaveURL(/dashboard/);

Test Structure

test.describe('Feature', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/');
    });

    test('scenario', async ({ page }) => {
        // test code
    });
});

Reference Files

Common Commands

npx playwright test                    # Run all tests
npx playwright test --headed           # Run with browser visible
npx playwright test --ui               # Interactive UI mode
npx playwright test --debug            # Debug mode with inspector
npx playwright test -g "login"         # Run tests matching pattern
npx playwright codegen example.com     # Generate tests by recording
npx playwright show-report             # View HTML report

Best Practices

1. Use role-based locators - Most resilient to DOM changes
2. Avoid CSS/XPath - Brittle, break with refactoring
3. Use auto-waiting assertions - expect(locator).toBeVisible() retries
4. Isolate tests - Each test starts fresh, no shared state
5. Mock external APIs - Use page.route() for reliability