Playwright Advanced Features — Trace Viewer, API Testing, and Component Testing

1// playwright.config.ts — enable traces
2use: {
3  trace: 'on-first-retry',    // capture trace when test is retried
4  // trace: 'on',              // always capture (large files)
5  // trace: 'retain-on-failure', // keep only on failure
6},
7
8// Open the HTML report with embedded traces:
9npx playwright show-report
10
11// Or open a specific trace file:
12npx playwright show-trace test-results/home-test/trace.zip
13
14// Generate a trace file manually in a test:
15test('debug this flow', async ({ page }) => {
16  await page.context().tracing.start({
17    screenshots: true,
18    snapshots: true,
19    sources: true,
20  });
21
22  await page.goto('/checkout');
23  await page.getByRole('button', { name: 'Pay Now' }).click();
24  // ... test steps ...
25
26  await page.context().tracing.stop({
27    path: 'test-results/checkout-trace.zip',
28  });
29});
30
31// What the trace viewer shows for each action:
32// 1. Before snapshot — DOM state before the action
33// 2. After snapshot  — DOM state after the action
34// 3. Network log     — all requests made during the action
35// 4. Console log     — JavaScript console output
36// 5. Call log        — Playwright's internal call details
37// 6. Time metadata   — exact timing of each step
38
39// Use the timeline scrubber to jump to any moment in the test
40// Click a network request to see full request/response headers and body
41// The diff between before/after snapshots reveals exactly what changed

1import { test, expect, request } from '@playwright/test';
2
3test('API: creates user and verifies in database', async ({ request }) => {
4  // Make a direct API call
5  const createRes = await request.post('http://localhost:3001/api/users', {
6    data: { name: 'API Test User', email: `api-test-${Date.now()}@example.com`, password: 'SecurePass1!' },
7  });
8
9  expect(createRes.status()).toBe(201);
10  const user = await createRes.json();
11  expect(user.id).toBeDefined();
12
13  // Verify the user exists via a GET call
14  const getRes = await request.get(`http://localhost:3001/api/users/${user.id}`, {
15    headers: { Authorization: `Bearer ${adminToken}` },
16  });
17  expect(getRes.ok()).toBe(true);
18  const fetched = await getRes.json();
19  expect(fetched.email).toBe(user.email);
20});
21
22// Use request in a custom fixture for authenticated API calls:
23export const test = base.extend<{ apiClient: APIRequestContext }>({
24  apiClient: async ({ request }, use) => {
25    // Log in and get token
26    const loginRes = await request.post('/api/auth/login', {
27      data: { email: '[email protected]', password: 'AdminPass1!' },
28    });
29    const { accessToken } = await loginRes.json();
30
31    // Create new context with auth header
32    const authedClient = await request.newContext({
33      extraHTTPHeaders: { Authorization: `Bearer ${accessToken}` },
34    });
35    await use(authedClient);
36    await authedClient.dispose();
37  },
38});
39
40// Combining API and browser in one test:
41test('admin creates course via API, student sees it in browser', async ({ page, request }) => {
42  // Create course via API
43  const course = await request.post('/api/courses', {
44    headers: { Authorization: `Bearer ${adminToken}` },
45    data: { title: 'New API Course', price: 29.99, level: 'BEGINNER', published: true },
46  });
47  const { id } = await course.json();
48
49  // Verify it appears in the browser
50  await page.goto('/courses');
51  await expect(page.getByText('New API Course')).toBeVisible();
52
53  // Cleanup via API
54  await request.delete(`/api/courses/${id}`, {
55    headers: { Authorization: `Bearer ${adminToken}` },
56  });
57});

1// Execute JavaScript in the browser context
2test('reads computed CSS property', async ({ page }) => {
3  await page.goto('/courses');
4
5  // Execute in browser, return to Node.js
6  const bgColor = await page.evaluate(() => {
7    const el = document.querySelector('.course-card');
8    return window.getComputedStyle(el!).backgroundColor;
9  });
10  expect(bgColor).toBe('rgb(255, 255, 255)');
11});
12
13// Pass arguments from Node.js to browser:
14test('sets feature flag and verifies UI change', async ({ page }) => {
15  await page.goto('/');
16  await page.evaluate((flagName) => {
17    localStorage.setItem(`feature_${flagName}`, 'true');
18  }, 'ai-assistant'); // 'ai-assistant' is passed as argument
19
20  await page.reload();
21  await expect(page.getByRole('button', { name: 'AI Assistant' })).toBeVisible();
22});
23
24// page.exposeFunction — call Node.js functions from browser:
25test('exposed function receives data from browser', async ({ page }) => {
26  const receivedData: string[] = [];
27
28  // Expose a Node.js function to the browser's window object
29  await page.exposeFunction('trackEvent', (eventName: string) => {
30    receivedData.push(eventName);
31  });
32
33  await page.goto('/');
34  // Browser code calls window.trackEvent('page_view')
35  // ... user interactions ...
36  await page.getByRole('link', { name: 'Courses' }).click();
37
38  expect(receivedData).toContain('page_view');
39  expect(receivedData).toContain('navigation_click');
40});
41
42// Waiting for browser-side conditions:
43await page.waitForFunction(() => {
44  return (window as any).__appLoaded === true;
45}, { timeout: 10_000 });
46
47// Reading from localStorage/sessionStorage:
48const token = await page.evaluate(() => localStorage.getItem('accessToken'));
49expect(token).toBeDefined();

1# GitHub Actions — run Playwright across 4 shards in parallel
2jobs:
3  playwright:
4    name: Playwright Tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
5    runs-on: ubuntu-latest
6    strategy:
7      fail-fast: false
8      matrix:
9        shardIndex: [1, 2, 3, 4]
10        shardTotal: [4]
11
12    steps:
13      - uses: actions/checkout@v4
14      - uses: actions/setup-node@v4
15        with: { node-version: '20', cache: 'npm' }
16      - run: npm ci
17      - run: npx playwright install --with-deps chromium
18
19      - name: Run Playwright shard
20        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
21
22      - uses: actions/upload-artifact@v4
23        if: always()
24        with:
25          name: playwright-blob-${{ matrix.shardIndex }}
26          path: blob-report/
27          retention-days: 1
28
29  merge-reports:
30    needs: playwright
31    runs-on: ubuntu-latest
32    if: always()
33    steps:
34      - uses: actions/checkout@v4
35      - uses: actions/setup-node@v4
36        with: { node-version: '20', cache: 'npm' }
37      - run: npm ci
38
39      - uses: actions/download-artifact@v4
40        with:
41          path: all-blob-reports
42          pattern: playwright-blob-*
43          merge-multiple: true
44
45      - name: Merge shard reports
46        run: npx playwright merge-reports --reporter html ./all-blob-reports
47
48      - uses: actions/upload-artifact@v4
49        with:
50          name: playwright-html-report
51          path: playwright-report/

1// playwright.config.ts for sharding:
2reporter: [
3  process.env['CI'] ? ['blob'] : ['html'], // blob for shards, html for local
4],

1npm init playwright@latest -- --ct  # initialise component testing
2# OR add to existing Playwright setup:
3npm install --save-dev @playwright/experimental-ct-react

1// playwright-ct.config.ts
2import { defineConfig } from '@playwright/experimental-ct-react';
3
4export default defineConfig({
5  testDir: './src',
6  testMatch: '**/*.ct.tsx',
7  use: {
8    ctPort: 3100,
9    ctViteConfig: {
10      resolve: { alias: { '@': '/src' } },
11    },
12  },
13});
14
15// src/components/CourseCard.ct.tsx
16import { test, expect } from '@playwright/experimental-ct-react';
17import { CourseCard } from './CourseCard';
18
19const course = {
20  id: '1', title: 'TypeScript Fundamentals',
21  instructor: 'Alice', price: 49.99, level: 'BEGINNER' as const,
22};
23
24test('renders course title and price', async ({ mount }) => {
25  const component = await mount(
26    <CourseCard course={course} onEnrol={() => {}} />
27  );
28
29  await expect(component.getByRole('heading')).toHaveText('TypeScript Fundamentals');
30  await expect(component.getByText('$49.99')).toBeVisible();
31});
32
33test('calls onEnrol with course id when Enrol button is clicked', async ({ mount }) => {
34  let enroledId: string | undefined;
35  const component = await mount(
36    <CourseCard course={course} onEnrol={(id) => { enroledId = id; }} />
37  );
38
39  await component.getByRole('button', { name: 'Enrol Now' }).click();
40  expect(enroledId).toBe('1');
41});
42
43test('component matches visual snapshot', async ({ mount }) => {
44  const component = await mount(<CourseCard course={course} onEnrol={() => {}} />);
45  await expect(component).toHaveScreenshot('course-card.png');
46});