API Testing with Playwright

Intermediate12 min

Use Playwright's built-in request context to test REST APIs directly, validate responses, and combine API calls with browser tests.

Prerequisites

-Playwright installed
-A REST API to test

Steps

Create an API test file

Write tests using Playwright's APIRequestContext without a browser.

$ cat > tests/api.spec.ts << 'EOF' import { test, expect } from '@playwright/test'; test.describe('API Tests', () => { test('GET /api/users returns user list', async ({ request }) => { const response = await request.get('/api/users'); expect(response.ok()).toBeTruthy(); expect(response.status()).toBe(200); const data = await response.json(); expect(data).toHaveProperty('users'); expect(data.users.length).toBeGreaterThan(0); }); test('POST /api/users creates a user', async ({ request }) => { const response = await request.post('/api/users', { data: { name: 'Test User', email: 'test@example.com', }, }); expect(response.status()).toBe(201); const user = await response.json(); expect(user.name).toBe('Test User'); }); }); EOF

Add authentication to API tests

Set up a test fixture that includes an auth token for all requests.

$ cat > tests/fixtures.ts << 'EOF' import { test as base } from '@playwright/test'; export const test = base.extend({ request: async ({ playwright }, use) => { const context = await playwright.request.newContext({ baseURL: 'http://localhost:3000', extraHTTPHeaders: { 'Authorization': 'Bearer ' + process.env.API_TOKEN, 'Content-Type': 'application/json', }, }); await use(context); await context.dispose(); }, }); export { expect } from '@playwright/test'; EOF

Use custom fixtures to avoid repeating auth setup in every test file.

Test API response schema

Validate that API responses match the expected structure.

$ cat >> tests/api.spec.ts << 'EOF' test('response matches expected schema', async ({ request }) => { const response = await request.get('/api/users/1'); const user = await response.json(); expect(user).toMatchObject({ id: expect.any(Number), name: expect.any(String), email: expect.stringContaining('@'), createdAt: expect.any(String), }); }); EOF

Combine API and browser tests

Use API calls to set up state before browser tests.

$ cat > tests/e2e-with-api.spec.ts << 'EOF' import { test, expect } from '@playwright/test'; test('create item via API, verify in UI', async ({ page, request }) => { // Create data via API const response = await request.post('/api/items', { data: { title: 'E2E Test Item', status: 'active' }, }); const item = await response.json(); // Verify in browser await page.goto('/items'); await expect(page.getByText('E2E Test Item')).toBeVisible(); // Cleanup via API await request.delete('/api/items/' + item.id); }); EOF

Full Script

full-script.sh

#!/bin/bash
# Playwright API Testing Setup
set -euo pipefail

echo "=== Setting Up API Tests ==="

mkdir -p tests

cat > tests/api.spec.ts << 'APITEST'
import { test, expect } from '@playwright/test';

test.describe('API Health & CRUD', () => {
  test('health check', async ({ request }) => {
    const response = await request.get('/api/health');
    expect(response.ok()).toBeTruthy();
    const data = await response.json();
    expect(data.status).toBe('healthy');
  });

  test('CRUD workflow', async ({ request }) => {
    // Create
    const createRes = await request.post('/api/items', {
      data: { title: 'Test Item', description: 'Created by Playwright' },
    });
    expect(createRes.status()).toBe(201);
    const created = await createRes.json();
    const id = created.id;

    // Read
    const getRes = await request.get(`/api/items/${id}`);
    expect(getRes.ok()).toBeTruthy();

    // Update
    const updateRes = await request.put(`/api/items/${id}`, {
      data: { title: 'Updated Item' },
    });
    expect(updateRes.ok()).toBeTruthy();

    // Delete
    const deleteRes = await request.delete(`/api/items/${id}`);
    expect(deleteRes.ok()).toBeTruthy();
  });
});
APITEST

echo "Created tests/api.spec.ts"
echo ""
echo "=== Run API Tests ==="
echo "npx playwright test tests/api.spec.ts"

FAQ

Discussion

Loading comments...

#!/bin/bash # Playwright API Testing Setup set -euo pipefail echo "=== Setting Up API Tests ===" mkdir -p tests cat > tests/api.spec.ts << 'APITEST' import { test, expect } from '@playwright/test'; test.describe('API Health & CRUD', () => { test('health check', async ({ request }) => { const response = await request.get('/api/health'); expect(response.ok()).toBeTruthy(); const data = await response.json(); expect(data.status).toBe('healthy'); }); test('CRUD workflow', async ({ request }) => { // Create const createRes = await request.post('/api/items', { data: { title: 'Test Item', description: 'Created by Playwright' }, }); expect(createRes.status()).toBe(201); const created = await createRes.json(); const id = created.id; // Read const getRes = await request.get(`/api/items/${id}`); expect(getRes.ok()).toBeTruthy(); // Update const updateRes = await request.put(`/api/items/${id}`, { data: { title: 'Updated Item' }, }); expect(updateRes.ok()).toBeTruthy(); // Delete const deleteRes = await request.delete(`/api/items/${id}`); expect(deleteRes.ok()).toBeTruthy(); }); }); APITEST echo "Created tests/api.spec.ts" echo "" echo "=== Run API Tests ===" echo "npx playwright test tests/api.spec.ts"