End-to-end testing with Playwright for web applications

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

// playwright.config.ts
export default {
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
  },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
};

// e2e/search.spec.ts
test('search returns relevant traces', async ({ page }) => {
  await page.goto('/');

  // Type in search box:
  const searchInput = page.getByPlaceholder('Search traces...');
  await searchInput.fill('react hooks useState');
  await searchInput.press('Enter');

  // Wait for results:
  await page.waitForSelector('[data-testid="search-result"]');

  const results = page.locator('[data-testid="search-result"]');
  await expect(results).toHaveCountGreaterThan(0);

  // First result should be relevant:
  const firstTitle = await results.first().locator('h3').textContent();
  expect(firstTitle?.toLowerCase()).toContain('react');
});

test('vote on a trace', async ({ page }) => {
  // Authenticate first:
  await page.goto('/login');
  await page.fill('[name=api_key]', process.env.TEST_API_KEY!);
  await page.click('[type=submit]');

  await page.goto('/traces/known-trace-id');

  const voteButton = page.getByRole('button', { name: 'Confirm' });
  await voteButton.click();

  // Verify vote was recorded:
  await expect(page.getByText('Vote recorded')).toBeVisible();
});