17API Testing with Playwright

17.1 REST in one screen

REST = Representational State Transfer. The contract:

• Resources have URLs: /users/42, /orders
• HTTP verbs express the action: GET (read), POST (create), PUT (replace), PATCH (partial update), DELETE (remove)
• Statelessness — every request carries enough info to be processed; no server-side session memory between calls (auth via token in each request)
• Representations — usually JSON, sometimes XML, sometimes Protobuf

17.2 HTTP status codes (the ladder)

17.3 Playwright's request fixture

Playwright ships an HTTP client called APIRequestContext, available as the built-in request fixture or via playwright.request.newContext(). It is async, returns Playwright Response objects you can assert on.

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

test('GET /users returns a list', async ({ request }) => {
  const res = await request.get('https://api.example.com/users');
  expect(res.status()).toBe(200);
  expect(res.ok()).toBeTruthy();           // 2xx
  const json = await res.json();
  expect(Array.isArray(json)).toBe(true);
  expect(json.length).toBeGreaterThan(0);
  expect(json[0]).toHaveProperty('email');
});

17.4 GET / POST / PUT / PATCH / DELETE

// GET with query
const res = await request.get('/api/users', { params: { role: 'admin', limit: 10 } });

// POST JSON
const create = await request.post('/api/users', {
  data: { name: 'Alice', email: 'alice@test.com' },
  headers: { 'x-test-mode': '1' },
});
expect(create.status()).toBe(201);
const user = await create.json();

// PUT — replace
await request.put(`/api/users/${user.id}`, {
  data: { name: 'Alice Smith', email: 'alice@test.com' },
});

// PATCH — partial update
await request.patch(`/api/users/${user.id}`, { data: { name: 'Alice S.' } });

// DELETE
const del = await request.delete(`/api/users/${user.id}`);
expect(del.status()).toBe(204);

// FORM body
await request.post('/login', { form: { user: 'a', pass: 'b' } });

// multipart / file
await request.post('/upload', { multipart: { file: fs.createReadStream('cv.pdf') } });

17.5 Auth patterns

// Bearer token (most common)
const res = await request.get('/api/me', {
  headers: { Authorization: `Bearer ${token}` },
});

// Basic auth
const res2 = await request.get('https://httpbin.org/basic-auth/u/p', {
  headers: { Authorization: 'Basic ' + Buffer.from('u:p').toString('base64') },
});

// Persistent — make a context with default headers
const api = await playwright.request.newContext({
  baseURL: 'https://api.example.com',
  extraHTTPHeaders: { Authorization: `Bearer ${token}`, 'x-tenant': 'qa' },
});
const me = await api.get('/me');
await api.dispose();

17.6 Asserting status, body, headers, time

test('orders endpoint', async ({ request }) => {
  const start = Date.now();
  const res = await request.get('/api/orders/123');
  const elapsed = Date.now() - start;

  // Status
  expect(res.status()).toBe(200);
  await expect(res).toBeOK();    // shortcut for 2xx — Playwright web-first

  // Headers
  expect(res.headers()['content-type']).toContain('application/json');
  expect(res.headers()['cache-control']).toBeDefined();

  // Body — full deep equality
  const body = await res.json();
  expect(body).toEqual({
    id: '123',
    total: expect.any(Number),
    items: expect.arrayContaining([expect.objectContaining({ sku: 'SKU-1' })]),
  });

  // Body — JSONPath-style
  expect(body.items).toHaveLength(2);
  expect(body.items[0].sku).toBe('SKU-1');

  // Performance
  expect(elapsed).toBeLessThan(500);   // SLA: 500 ms
});

17.7 When to API-test vs UI-test

17.8 Hybrid tests — API setup, UI verification

This is the SDET sweet spot. Use the API to create the exact pre-conditions (a user, an order, a coupon), then verify the UI renders them correctly. No fragile UI-based setup.

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

test('user sees their 3 recent orders', async ({ request, page }) => {
  // 1. SETUP via API — fast, deterministic
  const user = await (await request.post('/api/test/users', {
    data: { email: 'qa+orders@test.com' },
  })).json();

  for (const total of [99, 49, 199]) {
    await request.post('/api/test/orders', {
      data: { userId: user.id, total },
    });
  }

  // 2. Log in via UI (or via storageState — even faster)
  await page.goto('/login');
  await page.getByLabel('Email').fill(user.email);
  await page.getByLabel('Password').fill('test-pass');
  await page.getByRole('button', { name: 'Sign in' }).click();

  // 3. VERIFY UI rendering
  await page.goto('/orders');
  await expect(page.getByRole('listitem')).toHaveCount(3);
  await expect(page.getByText('$199')).toBeVisible();

  // 4. CLEANUP
  await request.delete(`/api/test/users/${user.id}`);
});

17.9 Schema validation

Manually equalling objects is brittle. Use a schema (Zod / Ajv) to validate shape independent of values.

import { z } from 'zod';

const Order = z.object({
  id: z.string(),
  total: z.number().positive(),
  items: z.array(z.object({ sku: z.string(), qty: z.number().int().min(1) })),
  createdAt: z.string().datetime(),
});

test('order schema', async ({ request }) => {
  const res = await request.get('/api/orders/123');
  expect(res.ok()).toBeTruthy();
  Order.parse(await res.json());   // throws if shape is wrong
});

17.10 Mixing UI + intercepted backend

You can also drive the UI but inject API responses via page.route to isolate frontend bugs from backend variability.

test('UI handles empty orders state', async ({ page }) => {
  await page.route('**/api/orders', r => r.fulfill({ status: 200, body: '[]' }));
  await page.goto('/orders');
  await expect(page.getByText('No orders yet')).toBeVisible();
});