Running Claude Code × Playwright E2E Tests in Production — Pitfalls and Decision Criteria

// Prompt to provide Claude Code
"
Based on the screenshot of an e-commerce product detail page, generate comprehensive
Playwright test code for the critical user interactions.
 
Page elements visible:
- Product image carousel (left side with slider controls)
- Product info panel (right side):
  - Product name (H1)
  - Price display
  - Star rating (5-star system)
  - 'Add to Cart' button
  - Quantity selector dropdown
- Customer reviews section below
 
Required test scenarios:
1. Product info displays on page load
2. Image carousel navigation works correctly
3. Users can modify quantity and add to cart
4. Price calculations are accurate
5. Reviews section is accessible via scroll
"

// Auto-generated test code example
import { test, expect } from '@playwright/test';
import { ProductDetailPage } from '../pages/ProductDetailPage';
 
test.describe('Product Detail Page', () => {
  let page: ProductDetailPage;
 
  test.beforeEach(async ({ page: playwrightPage }) => {
    page = new ProductDetailPage(playwrightPage);
    await page.goto('/products/123');
  });
 
  test('displays product information on page load', async () => {
    await expect(page.productName).toBeVisible();
    await expect(page.productPrice).toBeVisible();
    await expect(page.ratingStars).toBeVisible();
  });
 
  test('image carousel navigates between product images', async () => {
    const initialImage = await page.currentProductImage.getAttribute('src');
    await page.nextImageButton.click();
    await page.page.waitForTimeout(300); // Animation completion
    const nextImage = await page.currentProductImage.getAttribute('src');
    expect(initialImage).not.toBe(nextImage);
  });
 
  test('allows users to change quantity and add to cart', async () => {
    await page.quantityDropdown.selectOption('3');
    await page.addToCartButton.click();
    await expect(page.cartNotification).toContainText('Added to cart');
 
    // Verify price calculation
    const expectedPrice = 100 * 3; // unit_price × quantity
    await expect(page.totalPrice).toContainText(String(expectedPrice));
  });
 
  test('reviews section is scrollable into view', async () => {
    await page.reviewsSection.scrollIntoViewIfNeeded();
    await expect(page.reviewsSection).toBeInViewport();
    await expect(page.reviewsList).toHaveCount(/\d+/);
  });
});

// Interactive element detection
"
This navigation bar contains these interactive elements:
- Logo (clickable, navigates home)
- Search input field
- Category dropdown menu
- User account menu
 
Generate tests that verify the behavior of each interactive element.
"

test('search field enables keyword search', async ({ page }) => {
  await page.fill('[data-testid="search-input"]', 'laptop');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  // Wait for search results page navigation
  await expect(page).toHaveURL(/\/search\?q=laptop/);
 
  // Verify results display
  const results = await page.locator('[data-testid="search-result"]');
  await expect(results.first()).toBeVisible();
});
 
test('category dropdown expands and displays items', async ({ page }) => {
  const dropdown = page.locator('[data-testid="category-dropdown"]');
  await dropdown.click();
 
  // Verify menu appears
  const menu = page.locator('[data-testid="category-menu"]');
  await expect(menu).toBeVisible();
 
  // Verify menu items exist
  const items = menu.locator('[role="menuitem"]');
  const count = await items.count();
  expect(count).toBeGreaterThan(0);
});

// Auto-generated Page Object example
// tests/pages/LoginPage.ts
 
import { Page, Locator } from '@playwright/test';
 
export class LoginPage {
  // Element definitions
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly errorMessage: Locator;
  readonly rememberMeCheckbox: Locator;
  readonly forgotPasswordLink: Locator;
 
  constructor(page: Page) {
    this.page = page;
    // Prioritize data-testid attributes
    this.emailInput = page.locator('[data-testid="email-input"]');
    this.passwordInput = page.locator('[data-testid="password-input"]');
    this.loginButton = page.locator('[data-testid="login-button"]');
    this.errorMessage = page.locator('[data-testid="error-message"]');
    this.rememberMeCheckbox = page.locator('[data-testid="remember-me"]');
    this.forgotPasswordLink = page.locator('a:has-text("Forgot password?")');
  }
 
  // Navigation
  async goto() {
    await this.page.goto('/login');
    await this.emailInput.waitFor({ state: 'visible' });
  }
 
  // User actions
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
 
    // Wait for dashboard navigation
    await this.page.waitForURL(/\/dashboard/);
  }
 
  async loginAndExpectError(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
 
    // Wait for error message
    await this.errorMessage.waitFor({ state: 'visible' });
  }
 
  async enableRememberMe() {
    await this.rememberMeCheckbox.check();
  }
 
  async clickForgotPassword() {
    await this.forgotPasswordLink.click();
    await this.page.waitForURL(/\/password-reset/);
  }
 
  // Assertions
  async isErrorMessageVisible(): Promise<boolean> {
    return this.errorMessage.isVisible();
  }
 
  async getErrorMessageText(): Promise<string> {
    return this.errorMessage.textContent() || '';
  }
}

// Complex data table Page Object example
// tests/pages/DataTablePage.ts
 
import { Page, Locator } from '@playwright/test';
 
export class DataTablePage {
  readonly page: Page;
  readonly table: Locator;
  readonly rows: Locator;
  readonly sortButtons: Locator;
  readonly paginationButtons: Locator;
  readonly filterInput: Locator;
  readonly selectAllCheckbox: Locator;
 
  constructor(page: Page) {
    this.page = page;
    this.table = page.locator('[data-testid="data-table"]');
    this.rows = this.table.locator('[data-testid="table-row"]');
    this.sortButtons = this.table.locator('[data-testid="sort-button"]');
    this.paginationButtons = page.locator('[data-testid="pagination-button"]');
    this.filterInput = page.locator('[data-testid="filter-input"]');
    this.selectAllCheckbox = page.locator('[data-testid="select-all"]');
  }
 
  async goto() {
    await this.page.goto('/data-table');
    await this.table.waitFor({ state: 'visible' });
  }
 
  // Sorting
  async sortByColumn(columnName: string) {
    const button = this.sortButtons.locator(`text=${columnName}`).first();
    await button.click();
 
    // Wait for table re-render
    await this.page.waitForLoadState('networkidle');
  }
 
  // Filtering
  async filterByText(text: string) {
    await this.filterInput.fill(text);
    await this.page.waitForLoadState('networkidle');
  }
 
  // Pagination
  async goToPage(pageNumber: number) {
    const button = this.paginationButtons
      .locator(`text="${pageNumber}"`)
      .first();
    await button.click();
    await this.page.waitForLoadState('networkidle');
  }
 
  // Extract row data
  async getRowData(rowIndex: number): Promise<string[]> {
    const row = this.rows.nth(rowIndex);
    const cells = row.locator('[data-testid="table-cell"]');
    const count = await cells.count();
 
    const data: string[] = [];
    for (let i = 0; i < count; i++) {
      const text = await cells.nth(i).textContent();
      data.push(text || '');
    }
    return data;
  }
 
  // Multi-select rows
  async selectRows(indices: number[]) {
    for (const index of indices) {
      const checkbox = this.rows
        .nth(index)
        .locator('[data-testid="row-checkbox"]');
      await checkbox.check();
    }
  }
 
  // Get row count
  async getRowCount(): Promise<number> {
    return this.rows.count();
  }
}

// tests/visual/homepage.visual.spec.ts
 
import { test, expect } from '@playwright/test';
import { HomePage } from '../pages/HomePage';
 
test.describe('Homepage Visual Tests', () => {
  test('full page visual snapshot', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // Compare full page screenshot
    await expect(page).toHaveScreenshot('homepage-full.png', {
      fullPage: true,
      mask: [
        page.locator('[data-testid="dynamic-banner"]'), // Dynamic elements
      ],
    });
  });
 
  test('header visual snapshot', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // Specific element screenshot
    await expect(page.locator('header')).toHaveScreenshot(
      'header-snapshot.png'
    );
  });
 
  test('mobile view visual snapshot', async ({ browser }) => {
    const context = await browser.newContext({
      viewport: { width: 375, height: 812 }, // iPhone SE
    });
    const page = await context.newPage();
    const homePage = new HomePage(page);
 
    await homePage.goto();
    await expect(page).toHaveScreenshot('homepage-mobile.png', {
      fullPage: true,
    });
 
    await context.close();
  });
 
  test('dark mode visual snapshot', async ({ page }) => {
    await page.emulateMedia({ colorScheme: 'dark' });
    const homePage = new HomePage(page);
    await homePage.goto();
 
    await expect(page).toHaveScreenshot('homepage-dark-mode.png', {
      fullPage: true,
    });
  });
 
  test('button hover state visual snapshot', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
 
    // Hover and capture state
    await page.locator('[data-testid="primary-button"]').hover();
    await expect(page.locator('[data-testid="primary-button"]'))
      .toHaveScreenshot('button-hover-state.png');
  });
});

// Difference allowlist configuration
// playwright.config.ts extension
 
import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      // Tolerate minor rendering differences (≤1%)
      maxDiffPixels: 100,
      threshold: 0.01,
 
      // Mask dynamic and monitor-dependent elements
      mask: [
        { x: 0, y: 0, width: 1920, height: 50 }, // Timestamp area
      ],
    },
  },
});

// Prompt to diagnose and fix flaky tests
"
This test intermittently fails (~15% failure rate):
 
\`\`\`typescript
test('search results display', async ({ page }) => {
  await page.goto('/search');
  await page.fill('[data-testid="search-input"]', 'keyword');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  const results = page.locator('[data-testid="search-result"]');
  await expect(results.first()).toBeVisible();
});
\`\`\`
 
Identify the root cause and provide a repaired version.
"

// Repaired test code
test('search results display', async ({ page }) => {
  await page.goto('/search');
 
  // Ensure page is fully loaded
  await page.waitForLoadState('networkidle');
 
  const searchInput = page.locator('[data-testid="search-input"]');
  await searchInput.waitFor({ state: 'visible' });
 
  // Ensure field is interactive
  await searchInput.fill('keyword');
  await page.press('[data-testid="search-input"]', 'Enter');
 
  // Wait for navigation
  await page.waitForURL(/\/search\?q=/);
 
  // Explicitly wait for results
  const results = page.locator('[data-testid="search-result"]');
 
  // Use multiple conditions instead of just isVisible()
  await expect(results).toHaveCount(
    /[1-9]\d*/,  // At least 1 result
    { timeout: 5000 }
  );
 
  // Verify result is actually interactive
  await expect(results.first()).toBeFocused({ timeout: 3000 });
});

// Flaky test classifications and repair patterns
 
// 1. Network wait insufficiency
// Fix: Add waitForLoadState('networkidle')
await page.waitForLoadState('networkidle');
 
// 2. Animation completion not waited
// Fix: Replace hardcoded timeouts with condition-based waits
await page.locator('[data-testid="modal"]').waitFor({
  state: 'visible'
});
await page.waitForLoadState('domcontentloaded');
 
// 3. Async data load not confirmed
// Fix: Wait for skeleton loaders to disappear
await page.waitForSelector(
  '[data-testid="skeleton-loader"]',
  { state: 'hidden' }
);
 
// 4. Random selection from multiple elements
// Fix: Conditionally select first valid element
const firstEnabledButton = page
  .locator('[data-testid="action-button"]')
  .first()
  .locator(':not([disabled])');
await firstEnabledButton.click();
 
// 5. External API response delay
// Fix: Set appropriate timeout and add retry logic
await expect(page.locator('[data-testid="data"]'))
  .toContainText('expected value', { timeout: 10000 });

#!/usr/bin/env python3
"""Aggregate multiple Playwright JSON reports and find tests that flip between runs."""
import json, sys, glob
from collections import defaultdict
 
def walk(node, out):
    for spec in node.get("specs", []):
        key = f'{spec.get("file","?")}::{spec.get("title","?")}'
        for t in spec.get("tests", []):
            out[key].append(t.get("status", "unknown"))
    for child in node.get("suites", []):
        walk(child, out)
 
def load(path):
    with open(path, encoding="utf-8") as fh:
        data = json.load(fh)
    out = defaultdict(list)
    for suite in data.get("suites", []):
        walk(suite, out)
    return {k: v[0] for k, v in out.items() if v}
 
def main(pattern, threshold):
    paths = sorted(glob.glob(pattern))
    if not paths:
        print(f"No reports matched: {pattern}")
        return 2
    history = defaultdict(list)
    for p in paths:
        for key, status in load(p).items():
            history[key].append(status)
 
    within, across, stable = [], [], 0
    for key, statuses in history.items():
        seen = set(statuses)
        if "flaky" in seen:
            within.append((key, statuses))
        elif {"expected", "unexpected"} <= seen:
            across.append((key, statuses))
        else:
            stable += 1
 
    total = len(history)
    unstable = len(within) + len(across)
    rate = unstable / total * 100 if total else 0.0
 
    print(f"{len(paths)} report(s) / {total} test(s)")
    print(f"  Within-run flaky (labelled by Playwright): {len(within)}")
    print(f"  Cross-run flaky  (always green in isolation): {len(across)}")
    print(f"  Stable: {stable}")
    print(f"  Instability: {rate:.2f}%  (threshold {threshold:.2f}%)")
    if across:
        print("\n-- Not detectable from any single report --")
        for key, statuses in across:
            print(f"  {key}\n    {' '.join(statuses)}")
    return 1 if rate > threshold else 0
 
if __name__ == "__main__":
    pattern = sys.argv[1] if len(sys.argv) > 1 else "reports/*.json"
    threshold = float(sys.argv[2]) if len(sys.argv) > 2 else 5.0
    sys.exit(main(pattern, threshold))

$ python3 flaky_rate.py "reports/run-1.json" 5.0
1 report(s) / 12 test(s)
  Within-run flaky (labelled by Playwright): 1
  Cross-run flaky  (always green in isolation): 0
  Stable: 11
  Instability: 8.33%  (threshold 5.00%)
 
$ python3 flaky_rate.py "reports/*.json" 5.0
5 report(s) / 12 test(s)
  Within-run flaky (labelled by Playwright): 1
  Cross-run flaky  (always green in isolation): 2
  Stable: 9
  Instability: 25.00%  (threshold 5.00%)
 
-- Not detectable from any single report --
  tests/e2e/locale.spec.ts::locale switch preserves the path
    expected unexpected expected unexpected expected
  tests/e2e/article.spec.ts::tag page returns 200
    expected expected expected expected unexpected

      - name: Aggregate flaky rate across recent runs
        run: |
          python3 scripts/flaky_rate.py "artifacts/reports/*.json" 5.0

# .github/workflows/e2e-tests.yml
 
name: E2E Tests
 
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]
  schedule:
    - cron: '0 2 * * *'  # Daily at 2:00 AM UTC
 
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x, 20.x]
        browser: [chromium, firefox, webkit]
 
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
 
      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps ${{ matrix.browser }}
 
      - name: Start dev server
        run: |
          npm run build
          npm run dev &
          # Wait for server startup
          npx wait-on http://localhost:3000 --timeout 60000
 
      - name: Run E2E tests (${{ matrix.browser }})
        run: npx playwright test --project=${{ matrix.browser }}
        env:
          CI: true
          DEBUG: pw:api
 
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 30
 
      - name: Upload JUnit results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: junit-results-${{ matrix.browser }}
          path: test-results/junit.xml
 
      - name: Notify on failure
        if: failure()
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '❌ E2E tests failed. Check Actions tab for details.'
            })
 
  flaky-detection:
    name: Flaky Test Detection
    runs-on: ubuntu-latest
    if: github.event_name == 'schedule'
 
    steps:
      - uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'
          cache: 'npm'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
 
      - name: Run tests 10 times for flaky detection
        run: |
          for i in {1..10}; do
            echo "Run $i/10"
            npx playwright test || true
          done
 
      - name: Generate flaky test report
        if: always()
        run: node scripts/analyze-flaky-tests.js
 
      - name: Upload flaky report
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: flaky-test-report
          path: flaky-report.json

// scripts/analyze-flaky-tests.js
 
const fs = require('fs');
const path = require('path');
 
async function analyzeFlakyTests() {
  const resultsDir = 'test-results';
  const resultFiles = fs.readdirSync(resultsDir)
    .filter(f => f.endsWith('.json'));
 
  const testRuns = resultFiles.map(file => {
    const content = fs.readFileSync(
      path.join(resultsDir, file),
      'utf-8'
    );
    return JSON.parse(content);
  });
 
  // Aggregate pass/fail per test
  const testStats = new Map();
 
  testRuns.forEach((run, runIndex) => {
    run.suites?.forEach(suite => {
      suite.tests?.forEach(test => {
        const key = `${suite.title}::${test.title}`;
        if (!testStats.has(key)) {
          testStats.set(key, { passed: 0, failed: 0 });
        }
        const stats = testStats.get(key);
        if (test.status === 'passed') {
          stats.passed++;
        } else {
          stats.failed++;
        }
      });
    });
  });
 
  // Detect flaky tests (mixed pass/fail)
  const flakyTests = Array.from(testStats.entries())
    .filter(([, stats]) => stats.passed > 0 && stats.failed > 0)
    .map(([name, stats]) => ({
      name,
      passRate: (stats.passed / (stats.passed + stats.failed) * 100)
        .toFixed(1),
      stats
    }))
    .sort((a, b) => parseFloat(a.passRate) - parseFloat(b.passRate));
 
  const report = {
    timestamp: new Date().toISOString(),
    totalTests: testStats.size,
    flakyTestCount: flakyTests.length,
    flakyTests
  };
 
  fs.writeFileSync(
    'flaky-report.json',
    JSON.stringify(report, null, 2)
  );
 
  console.log(`\n🔍 Flaky Test Detection Results:`);
  console.log(`Total tests: ${report.totalTests}`);
  console.log(`Flaky tests detected: ${report.flakyTestCount}`);
 
  if (flakyTests.length > 0) {
    console.log('\n⚠️ Flaky tests found:');
    flakyTests.slice(0, 10).forEach(test => {
      console.log(
        `  - ${test.name} (pass rate: ${test.passRate}%)`
      );
    });
  }
}
 
analyzeFlakyTests().catch(console.error);

// tests/coverage-analyzer.ts
 
import fs from 'fs';
import { test, expect } from '@playwright/test';
import fetch from 'node-fetch';
 
interface CoverageMetrics {
  totalTests: number;
  passedTests: number;
  failedTests: number;
  passRate: number;
  averageExecutionTime: number;
  criticalPathCoverage: number;
  timestamp: string;
}
 
class CoverageAnalyzer {
  async generateReport(): Promise<CoverageMetrics> {
    const resultsFile = 'test-results/results.json';
 
    if (!fs.existsSync(resultsFile)) {
      throw new Error('Test results file not found');
    }
 
    const results = JSON.parse(fs.readFileSync(resultsFile, 'utf-8'));
 
    let totalTests = 0;
    let passedTests = 0;
    let failedTests = 0;
    let totalTime = 0;
 
    results.suites?.forEach((suite: any) => {
      suite.tests?.forEach((test: any) => {
        totalTests++;
        totalTime += test.duration || 0;
 
        if (test.status === 'passed') {
          passedTests++;
        } else {
          failedTests++;
        }
      });
    });
 
    const metrics: CoverageMetrics = {
      totalTests,
      passedTests,
      failedTests,
      passRate: (passedTests / totalTests * 100),
      averageExecutionTime: totalTime / totalTests,
      criticalPathCoverage: await this.calculateCriticalPathCoverage(),
      timestamp: new Date().toISOString(),
    };
 
    this.saveMetrics(metrics);
    this.generateDashboard(metrics);
 
    return metrics;
  }
 
  private async calculateCriticalPathCoverage(): Promise<number> {
    // Calculate critical feature path coverage
    const criticalPaths = [
      'User authentication flow',
      'Shopping cart operations',
      'Payment processing',
      'User registration'
    ];
 
    const coveredPaths = 3; // Example
    return (coveredPaths / criticalPaths.length) * 100;
  }
 
  private saveMetrics(metrics: CoverageMetrics): void {
    const historyFile = 'test-results/metrics-history.json';
    let history = [];
 
    if (fs.existsSync(historyFile)) {
      history = JSON.parse(fs.readFileSync(historyFile, 'utf-8'));
    }
 
    history.push(metrics);
 
    // Retain 30 days of data
    history = history.slice(-30);
 
    fs.writeFileSync(historyFile, JSON.stringify(history, null, 2));
  }
 
  private generateDashboard(metrics: CoverageMetrics): void {
    const html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>E2E Test Metrics Dashboard</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .metric-card {
          display: inline-block;
          padding: 20px;
          margin: 10px;
          background: #f0f0f0;
          border-radius: 8px;
          min-width: 200px;
        }
        .metric-value {
          font-size: 32px;
          font-weight: bold;
          color: #333;
        }
        .metric-label {
          font-size: 14px;
          color: #666;
          margin-top: 10px;
        }
        .success { color: #4caf50; }
        .failure { color: #f44336; }
      </style>
    </head>
    <body>
      <h1>E2E Test Metrics Dashboard</h1>
      <p>Last updated: ${metrics.timestamp}</p>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.totalTests}</div>
        <div class="metric-label">Total Tests</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value success">${metrics.passedTests}</div>
        <div class="metric-label">Passed</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value failure">${metrics.failedTests}</div>
        <div class="metric-label">Failed</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.passRate.toFixed(1)}%</div>
        <div class="metric-label">Pass Rate</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.averageExecutionTime.toFixed(0)}ms</div>
        <div class="metric-label">Avg Execution Time</div>
      </div>
 
      <div class="metric-card">
        <div class="metric-value">${metrics.criticalPathCoverage.toFixed(1)}%</div>
        <div class="metric-label">Critical Path Coverage</div>
      </div>
 
      <canvas id="trendChart"></canvas>
      <script>
        // Metrics trend graph (implementation details omitted)
      </script>
    </body>
    </html>
    `;
 
    fs.writeFileSync('playwright-report/dashboard.html', html);
  }
}
 
export const analyzer = new CoverageAnalyzer();

// tests/fixtures/test-data.ts
 
import { test as base, expect } from '@playwright/test';
 
type TestFixtures = {
  cleanDatabase: void;
  authenticatedUser: { email: string; password: string };
  testProduct: { id: string; name: string };
};
 
export const test = base.extend<TestFixtures>({
  cleanDatabase: async ({}, use) => {
    // Before test: Reset database
    await resetDatabase();
 
    await use();
 
    // After test: Cleanup
    await resetDatabase();
  },
 
  authenticatedUser: async ({ page }, use) => {
    // Create test account
    const testUser = {
      email: `test-${Date.now()}@example.com`,
      password: 'TestPassword123!',
    };
 
    // Login before test
    await page.goto('/login');
    await page.fill('[data-testid="email"]', testUser.email);
    await page.fill('[data-testid="password"]', testUser.password);
    await page.click('[data-testid="login-button"]');
 
    await use(testUser);
 
    // After test: Delete account
    await deleteTestUser(testUser.email);
  },
 
  testProduct: async ({}, use) => {
    const product = await createTestProduct({
      name: 'Test Product',
      price: 1000,
    });
 
    await use(product);
 
    // After test: Delete product
    await deleteTestProduct(product.id);
  },
});
 
async function resetDatabase() {
  const response = await fetch('http://localhost:3000/api/test/reset', {
    method: 'POST',
  });
  if (!response.ok) {
    throw new Error('Database reset failed');
  }
}

// playwright.config.ts operational settings
 
export default defineConfig({
  timeout: 30000, // Max time per test
  expect: {
    timeout: 5000, // Assertion timeout
  },
 
  // Retry only in CI
  retries: process.env.CI ? 3 : 0,
 
  // Parallel workers
  workers: process.env.CI ? 1 : 4,
 
  // Auto screenshots/videos on failure
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
 
  // Global timeout
  globalTimeout: 3600000, // 1 hour
});

// tests/utils/test-logger.ts
 
import fs from 'fs';
import { test } from '@playwright/test';
 
export class TestLogger {
  private logFile: string;
 
  constructor(testName: string) {
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    this.logFile = `logs/${testName}-${timestamp}.log`;
 
    if (!fs.existsSync('logs')) {
      fs.mkdirSync('logs');
    }
  }
 
  log(message: string, level: 'info' | 'warn' | 'error' = 'info') {
    const timestamp = new Date().toISOString();
    const logEntry = `[${timestamp}] [${level.toUpperCase()}] ${message}\n`;
 
    console.log(logEntry);
    fs.appendFileSync(this.logFile, logEntry);
  }
 
  info(message: string) {
    this.log(message, 'info');
  }
 
  warn(message: string) {
    this.log(message, 'warn');
  }
 
  error(message: string, error?: Error) {
    const errorMessage = error
      ? `${message}: ${error.message}\n${error.stack}`
      : message;
    this.log(errorMessage, 'error');
  }
}
 
// Usage in tests
test('critical feature', async ({ page }) => {
  const logger = new TestLogger('critical-feature');
 
  try {
    logger.info('Starting navigation');
    await page.goto('/critical-path');
    logger.info('Page loaded successfully');
  } catch (error) {
    logger.error('Navigation failed', error as Error);
    throw error;
  }
});

// playwright.config.ts
export default defineConfig({
  use: {
    // Don't hardcode — read from env
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
  },
});

# .github/workflows/e2e-tests.yml
- name: Fetch Pages preview URL
  id: pages
  run: |
    DEPLOYMENT_URL=$(curl -s \
      -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
      "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CF_ACCOUNT_ID }}/pages/projects/${{ env.PROJECT }}/deployments" \
      | jq -r '.result[0].url')
    echo "url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
 
- name: Run E2E tests
  env:
    PLAYWRIGHT_BASE_URL: ${{ steps.pages.outputs.url }}
  run: npx playwright test

// tests/global-setup.ts — warm up before the suite runs
import { request } from '@playwright/test';
 
async function globalSetup() {
  const baseURL = process.env.PLAYWRIGHT_BASE_URL!;
  const req = await request.newContext();
 
  // Warm-up: fetch the four primary pages so Workers is hot
  const warmupPaths = ['/', '/articles', '/membership', '/blog'];
  await Promise.all(
    warmupPaths.map(p =>
      req.get(`${baseURL}${p}`, { timeout: 30000 }).catch(() => null)
    )
  );
 
  await req.dispose();
}
 
export default globalSetup;

test.beforeEach(async ({ context }) => {
  // Clear cookies and web storage before each test
  await context.clearCookies();
  await context.addInitScript(() => {
    window.localStorage.clear();
    window.sessionStorage.clear();
  });
});