Advanced Workflows Advanced

Claude > Update the Playwright config to run tests on all three
         browsers (Chromium, Firefox, WebKit) plus mobile viewports
         for iPhone 14 and Pixel 7. Set up separate projects
         for each.

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 7'] } },
  { name: 'mobile-safari', use: { ...devices['iPhone 14'] } },
],

Claude > Create a GitHub Actions workflow that:
         1. Runs Playwright tests on push to main and on PRs
         2. Uses a matrix strategy for Chromium and Firefox
         3. Uploads test results and traces as artifacts
         4. Posts a comment on the PR with test results

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps ${{ matrix.browser }}
      - run: npx playwright test --project=${{ matrix.browser }}
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/

test('homepage loads within performance budget', async ({ page }) => {
  const startTime = Date.now();
  await page.goto('/');

  // Measure page load time
  const loadTime = Date.now() - startTime;
  expect(loadTime).toBeLessThan(3000);

  // Check Web Vitals via Performance API
  const metrics = await page.evaluate(() => {
    const entries = performance.getEntriesByType('navigation');
    const nav = entries[0] as PerformanceNavigationTiming;
    return {
      domContentLoaded: nav.domContentLoadedEventEnd - nav.startTime,
      loadComplete: nav.loadEventEnd - nav.startTime,
      ttfb: nav.responseStart - nav.requestStart,
    };
  });

  expect(metrics.ttfb).toBeLessThan(600);
  expect(metrics.domContentLoaded).toBeLessThan(2000);
});

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

// Use a specific device profile
test.use({ ...devices['iPhone 14'] });

test('mobile navigation menu works', async ({ page }) => {
  await page.goto('/');
  // Desktop nav should be hidden on mobile
  await expect(page.getByRole('navigation')).not.toBeVisible();
  // Hamburger menu should be visible
  await page.getByRole('button', { name: 'Menu' }).click();
  await expect(page.getByRole('navigation')).toBeVisible();
});

test('shows error when API fails', async ({ page }) => {
  // Mock the API to return a 500 error
  await page.route('**/api/products', (route) => {
    route.fulfill({ status: 500, body: 'Internal Server Error' });
  });

  await page.goto('/products');
  await expect(page.getByText('Failed to load products')).toBeVisible();
});

test('handles slow network gracefully', async ({ page }) => {
  // Delay the API response by 5 seconds
  await page.route('**/api/products', async (route) => {
    await new Promise(r => setTimeout(r, 5000));
    await route.continue();
  });

  await page.goto('/products');
  await expect(page.getByText('Loading...')).toBeVisible();
});

import { test as setup } from '@playwright/test';

const authFile = 'playwright/.auth/user.json';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Sign In' }).click();
  await page.waitForURL('/dashboard');
  await page.context().storageState({ path: authFile });
});

Claude > Configure Playwright to run with 4 workers locally
         and 2 workers in CI. Make sure the auth tests run
         serially before other tests. Set up test sharding
         for the CI pipeline.

reporter: [
  ['html', { open: 'never' }],
  ['json', { outputFile: 'test-results/results.json' }],
  ['junit', { outputFile: 'test-results/junit.xml' }],
],