playwright

Playwright Skill

Browser automation and E2E testing with Playwright.

When to Use

• Writing E2E tests
• Browser automation scripts
• Web scraping
• Visual regression testing
• Cross-browser testing

When NOT to Use

• Unit tests (use Jest/Vitest)
• API-only tests (use direct HTTP)
• Simple DOM testing (use Testing Library)

Setup

# Install
npm init playwright@latest

# Or add to existing project
npm install -D @playwright/test
npx playwright install

Test Structure

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

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

  test('should do something', async ({ page }) => {
    // Arrange
    await page.fill('[data-testid="email"]', '[email protected]');
    
    // Act
    await page.click('button[type="submit"]');
    
    // Assert
    await expect(page.locator('.success')).toBeVisible();
  });
});

Common Patterns

Locators (Preferred Order)

// 1. Role (best for accessibility)
page.getByRole('button', { name: 'Submit' })

// 2. Test ID (explicit)
page.getByTestId('submit-button')

// 3. Text
page.getByText('Submit')

// 4. Label
page.getByLabel('Email')

// 5. CSS (last resort)
page.locator('.submit-btn')

Waiting

// Auto-wait (built-in)
await page.click('button'); // waits for button to be actionable

// Explicit wait
await page.waitForSelector('.loaded');
await page.waitForLoadState('networkidle');
await page.waitForResponse(resp => resp.url().includes('/api/data'));

// Wait for condition
await expect(page.locator('.item')).toHaveCount(5);

Forms

// Fill form
await page.fill('#email', '[email protected]');
await page.fill('#password', 'secret');

// Select dropdown
await page.selectOption('#country', 'US');

// Checkbox/Radio
await page.check('#agree');
await page.uncheck('#newsletter');

// File upload
await page.setInputFiles('#avatar', 'path/to/file.png');