Playwright

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

test('a customer can check out', async ({ page }) => {
  await page.goto('/products/field-notes');

  await page.getByRole('button', { name: 'Add to cart' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
  await page.getByLabel('Card number').fill('4242424242424242');
  await page.getByRole('button', { name: /^Pay/ }).click();

  // Retries until true or times out — no waits, no sleeps.
  await expect(page.getByRole('heading', { name: 'Order confirmed' })).toBeVisible();
});

// Reads once, right now. A race, dressed as an assertion.
expect(await page.getByRole('status').isVisible()).toBe(true);

// Retries. Use this form.
await expect(page.getByRole('status')).toBeVisible();

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

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,          // a stray .only must fail the build
  retries: process.env.CI ? 1 : 0,       // one retry, reported as "flaky"
  workers: process.env.CI ? 4 : undefined,
  reporter: [['html', { open: 'never' }], ['list'], ['blob']],

  use: {
    baseURL: process.env.BASE_URL ?? 'http://127.0.0.1:3000',
    trace: 'on-first-retry',             // the single best setting here
    screenshot: 'only-on-failure',
    video: 'retain-on-failure'
  },

  projects: [
    { name: 'setup', testMatch: /auth\.setup\.ts/ },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], storageState: '.auth/user.json' },
      dependencies: ['setup']
    },
    { name: 'webkit', use: { ...devices['Desktop Safari'] }, dependencies: ['setup'] }
  ],

  // Starts the app for you and waits for it — no sleep in a CI script.
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000/api/health',
    reuseExistingServer: !process.env.CI
  }
});

// e2e/fixtures.ts — a logged-in page and a fresh customer, per test
import { test as base } from '@playwright/test';
import { createCustomer, deleteCustomer } from './support/api';

export const test = base.extend<{ customer: Customer }>({
  customer: async ({ request }, use, testInfo) => {
    const customer = await createCustomer(request, {
      email: `buyer-${testInfo.workerIndex}-${Date.now()}@example.test`
    });
    await use(customer);
    await deleteCustomer(request, customer.id);
  }
});

export { expect } from '@playwright/test';

// Make a third party fail on demand, which the real one will not do.
await page.route('**/api/rates/**', (route) =>
  route.fulfill({ status: 503, body: 'unavailable' })
);

await page.goto('/checkout');
await expect(page.getByRole('alert')).toContainText('cannot calculate shipping');

npx playwright install --with-deps chromium webkit   # browsers + OS libs
npx playwright test --shard=1/4                      # one of four machines
npx playwright merge-reports --reporter=html ./blob  # one report from all shards