Playwright E2e Testing

# Playwright E2E Testing Skill

---
progressive_disclosure:
  entry_point:
    summary: "Modern E2E testing framework with cross-browser automation and built-in test runner"
    when_to_use:
      - "When testing web applications end-to-end"
      - "When needing cross-browser testing"
      - "When testing user flows and interactions"
      - "When needing screenshot/video recording"
    quick_start:
      - "npm init playwright@latest"
      - "Choose TypeScript and test location"
      - "npx playwright test"
      - "npx playwright show-report"
  token_estimate:
    entry: 75-90
    full: 4200-5200
---

<!-- ENTRY POINT - Load this section by default (75-90 tokens) -->

## Overview

Playwright is a modern end-to-end testing framework that provides cross-browser automation with a built-in test runner, auto-wait mechanisms, and excellent developer experience.

### Key Features
- **Auto-wait**: Automatically waits for elements to be ready
- **Cross-browser**: Chromium, Firefox, WebKit support
- **Built-in runner**: Parallel execution, retries, reporters
- **Network control**: Mock and intercept network requests
- **Debugging**: UI mode, trace viewer, inspector

---

<!-- FULL CONTENT - Load on demand (4200-5200 tokens) -->

## Installation

```bash
# Initialize new Playwright project
npm init playwright@latest

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

# Install browsers
npx playwright install
```

### Configuration

```typescript
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],

  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});
```

## Fundamentals

### Basic Test Structure

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

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');

  // Wait for element and check visibility
  const title = page.locator('h1');
  await expect(title).toBeVisible();
  await expect(title).toHaveText('Example Domain');

  // Get page title
  await expect(page).toHaveTitle(/Example/);
});

test.describe('User authentication', () => {
  test('should login successfully', async ({ page }) => {
    await page.goto('/login');
    await page.fill('[name="username"]', 'testuser');
    await page.fill('[name="password"]', 'password123');
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('.welcome-message')).toContainText('Welcome');
  });

  test('should show error for invalid credentials', async ({ page }) => {
    await page.goto('/login');
    await page.fill('[name="username"]', 'invalid');