playwright-api-spy

Capture and log API requests/responses with beautiful HTML and JSON reports

---

Features

• 🔍 Automatic Capture - Intercepts all requests made via Playwright's APIRequestContext
• 📊 Beautiful Reports - Playwright-style HTML reports with filtering and search
• 📄 JSON Export - Machine-readable reports for CI/CD integration
• 🔒 Data Redaction - Automatically hide sensitive data (passwords, tokens)
• 📎 Playwright Integration - Attach API data to Playwright test reports
• ⏱️ Timeline View - Visualize request timing

Installation

npm install playwright-api-spy

Quick Start

1. Configure Playwright

// playwright.config.ts
import { defineConfig } from '@playwright/test';
import { withApiSpy } from 'playwright-api-spy';

export default defineConfig(withApiSpy({
  testDir: './tests',
  use: {
    baseURL: 'https://api.example.com',
  },
}, {
  // API Spy options (all optional)
  htmlReport: { enabled: true },
  jsonReport: { enabled: true },
}));

2. Use in Tests

// tests/api.spec.ts
import { testWithApiSpy as test, expect } from 'playwright-api-spy';

test('should create user', async ({ request, apiSpy }) => {
  const response = await request.post('/users', {
    data: { name: 'John', email: '[email protected]' },
  });
  
  expect(response.ok()).toBeTruthy();
  expect(apiSpy.lastRequest?.method).toBe('POST');
  expect(apiSpy.lastResponse?.status).toBe(201);
});

3. Add Reporter (Optional)

// playwright.config.ts
export default defineConfig({
  reporter: [
    ['html'],
    ['playwright-api-spy/reporter'],
  ],
});

Configuration

Option	Type	Default	Description
console	boolean	false	Log requests to console
verbosity	'minimal' | 'normal' | 'verbose'	'normal'	Console output detail level
htmlReport.enabled	boolean	true	Generate HTML report
htmlReport.outputDir	string	'./playwright-report'	Output directory
jsonReport.enabled	boolean	true	Generate JSON report
attachToPlaywrightReport	boolean	true	Attach data to Playwright report
redact.headers	string[]	['Authorization', ...]	Headers to redact
redact.bodyFields	string[]	['password', ...]	Body fields to redact
filter.includePaths	string[]	[]	Only log matching paths (regex)
filter.excludePaths	string[]	[]	Exclude matching paths (regex)

Viewing Reports

After running tests, view the API Spy report:

npx playwright-api-spy show-report

The report will be located in playwright-report/api-spy.html alongside the Playwright HTML report.

API Reference

apiSpy Fixture

interface ApiSpy {
  requests: CapturedRequest[];      // All captured requests
  lastRequest?: CapturedRequest;    // Most recent request
  lastResponse?: CapturedResponse;  // Most recent response
  
  addContext(context: string): void;  // Add context to requests
  clearContext(): void;               // Clear context
  pause(): void;                      // Pause capturing
  resume(): void;                     // Resume capturing
  clear(): void;                      // Clear captured data
  
  onRequest(callback): void;          // Request hook
  onResponse(callback): void;         // Response hook
  onError(callback): void;            // Error hook
}

Documentation

📖 Full Documentation