The Playwright Playbook — Part 4: API Testing — The Underrated Superpower
Published: (June 17, 2026 at 10:11 PM EDT)
19 min read
Source: Dev.to
Source: Dev.to
The Playwright Playbook — Part 4: API Testing — The Underrated Superpower
“The best UI test is one that doesn’t need the UI at all.”
In Part 1, we built the foundation. In Part 2, we intercepted the network. In Part 3, we ran multiple users simultaneously.
Now we go one layer deeper — below the browser entirely.
Playwright’s API request context.
Most engineers reach for Postman when they need to test an API. Or they write a separate pytest/Jest suite just for API tests. Separate tool, separate pipeline, separate maintenance burden.
Here’s what they’re missing: Playwright can make raw HTTP requests without a browser. Same tool. Same TypeScript. Same test runner. Same CI pipeline.
And when you combine API calls with UI assertions in a single test — that’s where the real power shows up.
No browser overhead for setup. No flaky UI login flows for data seeding. Just fast, direct, precise API calls — chained into the UI tests you’re already writing.
By the end of this part, you’ll have a complete API testing layer that lives right inside your Playwright project. Let’s build it. 🎯
🏗️ Where We Left Off
After Part 3, our full project structure is:
playwright-playbook/
├── tests/
│ ├── auth/
│ │ └── login.spec.ts ✅ Part 1
│ ├── tasks/
│ │ └── task-management.spec.ts ✅ Part 1
│ ├── network/ ✅ Part 2
│ │ ├── api-mocking.spec.ts
│ │ ├── error-simulation.spec.ts
│ │ └── network-assertions.spec.ts
│ ├── multi-user/ ✅ Part 3
│ │ ├── role-permissions.spec.ts
│ │ └── realtime-collaboration.spec.ts
│ └── multi-tab/ ✅ Part 3
│ └── multi-tab-flows.spec.ts
├── pages/
│ ├── LoginPage.ts ✅ Part 1
│ ├── TaskPage.ts ✅ Part 1
│ └── DashboardPage.ts ✅ Part 3
├── fixtures/
│ ├── auth.fixture.ts ✅ Part 1
│ ├── tasks.json ✅ Part 2
│ ├── empty-tasks.json ✅ Part 2
│ ├── tasks-har.har ✅ Part 2
│ └── multi-user.fixture.ts ✅ Part 3
├── scripts/
│ └── record-har.ts ✅ Part 2
├── .auth/
│ ├── admin.json
│ └── user.json
├── global-setup.ts ✅ Part 1
├── playwright.config.ts ✅ Part 1 (updated Part 3)
└── .env
Enter fullscreen mode
Exit fullscreen modeBy the end of Part 4, we add:
playwright-playbook/
├── tests/
│ └── api/ ← NEW
│ ├── tasks-api.spec.ts
│ ├── auth-api.spec.ts
│ ├── graphql-api.spec.ts
│ └── api-ui-chain.spec.ts
├── api/ ← NEW
│ ├── TaskApiClient.ts
│ └── AuthApiClient.ts
├── fixtures/
│ └── api.fixture.ts ← NEW
└── utils/
└── schema-validator.ts ← NEW
Enter fullscreen mode
Exit fullscreen modeEvery one of these files gets fully built below. Let’s go. 👇
🧠 The Mental Model — Three Ways to Use the Request Context
Before we write code, understand the three modes Playwright gives you for API testing:
Mode 1 — request fixture (isolated, no browser cookies)
└── Pure API tests — no UI involved at all
Mode 2 — page.request (shares browser context cookies)
└── API calls that need the same auth as the current page
Mode 3 — APIRequestContext from playwright.config.ts
└── Shared request context across your whole suite (baseURL, headers)
Enter fullscreen mode
Exit fullscreen modeWe’ll use all three — each for the right job. Let’s build from the bottom up.
⚙️ Configuring the API Base in playwright.config.ts
First, add API-specific config so all our API clients share the same base settings:
// playwright.config.ts — updated
import { defineConfig, devices } from '@playwright/test';
import * as dotenv from 'dotenv';
dotenv.config();
export default defineConfig({
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 1 : 0,
workers: process.env.CI ? 4 : undefined,
globalSetup: './global-setup.ts',
reporter: [
['html', { open: 'never' }],
['list'],
],
use: {
baseURL: process.env.BASE_URL || 'http://localhost:3000',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
trace: 'on-first-retry',
// Default headers for ALL API requests across the suite
extraHTTPHeaders: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
},
projects: [
{
name: 'admin',
use: {
...devices['Desktop Chrome'],
storageState: '.auth/admin.json',
},
testMatch: ['**/auth/**', '**/tasks/**', '**/network/**'],
},
{
name: 'user',
use: {
...devices['Desktop Chrome'],
storageState: '.auth/user.json',
},
testMatch: ['**/tasks/**'],
},
{
name: 'multi-context',
use: { ...devices['Desktop Chrome'] },
testMatch: ['**/multi-user/**', '**/multi-tab/**'],
},
{
// API tests — no browser needed, no storageState
name: 'api',
use: {},
testMatch: ['**/api/**'],
},
],
});
Enter fullscreen mode
Exit fullscreen modeThe api project has no devices — no browser spins up at all for pure API tests. Fastest possible execution. ✅
🔑 Building the Auth API Client
Our Task Manager uses JWT tokens. Before we can call protected API endpoints, we need a way to get tokens programmatically — without touching the browser.
// api/AuthApiClient.ts
import { APIRequestContext } from '@playwright/test';
export interface AuthTokens {
accessToken: string;
refreshToken: string;
expiresIn: number;
}
export interface UserCredentials {
email: string;
password: string;
}
export class AuthApiClient {
constructor(private readonly request: APIRequestContext) {}
async login(credentials: UserCredentials): Promise {
const response = await this.request.post('/api/auth/login', {
data: credentials,
});
if (!response.ok()) {
throw new Error(
`Login failed: ${response.status()} ${await response.text()}`
);
}
return response.json() as Promise;
}
async refreshToken(refreshToken: string): Promise {
const response = await this.request.post('/api/auth/refresh', {
data: { refreshToken },
});
if (!response.ok()) {
throw new Error(`Token refresh failed: ${response.status()}`);
}
return response.json() as Promise;
}
async logout(accessToken: string): Promise {
await this.request.post('/api/auth/logout', {
headers: { Authorization: `Bearer ${accessToken}` },
});
}
async getAdminToken(): Promise {
const tokens = await this.login({
email: process.env.ADMIN_EMAIL!,
password: process.env.ADMIN_PASSWORD!,
});
return tokens.accessToken;
}
async getUserToken(): Promise {
const tokens = await this.login({
email: process.env.USER_EMAIL!,
password: process.env.USER_PASSWORD!,
});
return tokens.accessToken;
}
}
Enter fullscreen mode
Exit fullscreen mode📋 Building the Task API Client
Now the main API client — wrapping all task-related endpoints with typed methods.
// api/TaskApiClient.ts
import { APIRequestContext, APIResponse } from '@playwright/test';
export interface Task {
id: number;
title: string;
status: 'pending' | 'in_progress' | 'completed';
assignee: string;
createdAt: string;
updatedAt: string;
}
export interface CreateTaskPayload {
title: string;
status?: Task['status'];
assignee?: string;
}
export interface UpdateTaskPayload {
title?: string;
status?: Task['status'];
assignee?: string;
}
export class TaskApiClient {
constructor(
private readonly request: APIRequestContext,
private readonly token: string
) {}
private get authHeaders() {
return { Authorization: `Bearer ${this.token}` };
}
async getAllTasks(): Promise {
const response = await this.request.get('/api/tasks', {
headers: this.authHeaders,
});
return response.json();
}
async getTask(id: number): Promise {
const response = await this.request.get(`/api/tasks/${id}`, {
headers: this.authHeaders,
});
return response.json();
}
async createTask(payload: CreateTaskPayload): Promise {
const response = await this.request.post('/api/tasks', {
headers: this.authHeaders,
data: payload,
});
const task = await response.json();
return { response, task };
}
async updateTask(id: number, payload: UpdateTaskPayload): Promise {
const response = await this.request.patch(`/api/tasks/${id}`, {
headers: this.authHeaders,
data: payload,
});
const task = await response.json();
return { response, task };
}
async deleteTask(id: number): Promise {
return this.request.delete(`/api/tasks/${id}`, {
headers: this.authHeaders,
});
}
async getTasksByStatus(status: Task['status']): Promise {
const response = await this.request.get(`/api/tasks?status=${status}`, {
headers: this.authHeaders,
});
return response.json();
}
}
Enter fullscreen mode
Exit fullscreen modeFully typed. Every method returns the raw APIResponse where needed (so tests can assert on status codes) AND the parsed body. No hunting through raw responses in test files. 🎯
🧩 Building the API Fixture
Just like Part 1’s auth.fixture.ts made POM setup invisible in tests, our api.fixture.ts makes API client setup invisible.
// fixtures/api.fixture.ts
import { test as base, APIRequestContext } from '@playwright/test';
import { TaskApiClient } from '../api/TaskApiClient';
import { AuthApiClient } from '../api/AuthApiClient';
type ApiFixtures = {
authApi: AuthApiClient;
adminTaskApi: TaskApiClient;
userTaskApi: TaskApiClient;
};
export const test = base.extend({
// Auth API client — unauthenticated, used for login/logout tests
authApi: async ({ request }, use) => {
await use(new AuthApiClient(request));
},
// Task API client — authenticated as admin
adminTaskApi: async ({ request }, use) => {
const authApi = new AuthApiClient(request);
const token = await authApi.getAdminToken();
await use(new TaskApiClient(request, token));
},
// Task API client — authenticated as regular user
userTaskApi: async ({ request }, use) => {
const authApi = new AuthApiClient(request);
const token = await authApi.getUserToken();
await use(new TaskApiClient(request, token));
},
});
export { expect } from '@playwright/test';
Enter fullscreen mode
Exit fullscreen mode🛡️ Building the Schema Validator
One of the most common API testing gaps: everyone checks status codes, almost nobody validates response structure. A 200 with a broken body is still a broken API.
// utils/schema-validator.ts
export interface TaskSchema {
id: number;
title: string;
status: string;
assignee: string;
createdAt: string;
updatedAt: string;
}
export function validateTaskSchema(task: unknown): task is TaskSchema {
if (typeof task !== 'object' || task === null) return false;
const t = task as Record;
return (
typeof t.id === 'number' &&
typeof t.title === 'string' &&
t.title.length > 0 &&
['pending', 'in_progress', 'completed'].includes(t.status as string) &&
typeof t.assignee === 'string' &&
typeof t.createdAt === 'string' &&
typeof t.updatedAt === 'string' &&
!isNaN(Date.parse(t.createdAt as string)) &&
!isNaN(Date.parse(t.updatedAt as string))
);
}
export function validateTaskListSchema(tasks: unknown): tasks is TaskSchema[] {
return Array.isArray(tasks) && tasks.every(validateTaskSchema);
}
// Generic field presence checker — useful for partial response validation
export function assertRequiredFields(
obj: Record,
fields: string[]
): void {
const missing = fields.filter(field => !(field in obj) || obj[field] === undefined);
if (missing.length > 0) {
throw new Error(`Missing required fields in response: ${missing.join(', ')}`);
}
}
Enter fullscreen mode
Exit fullscreen mode✅ Task API Tests — CRUD, Status Codes & Schema Validation
// tests/api/tasks-api.spec.ts
import { test, expect } from '../../fixtures/api.fixture';
import { validateTaskSchema, validateTaskListSchema } from '../../utils/schema-validator';
test.describe('Tasks API — GET', () => {
test('GET /api/tasks returns 200 and valid task list schema', async ({ adminTaskApi }) => {
const tasks = await adminTaskApi.getAllTasks();
expect(Array.isArray(tasks)).toBe(true);
expect(validateTaskListSchema(tasks)).toBe(true);
});
test('GET /api/tasks/:id returns correct task', async ({ adminTaskApi }) => {
// Create a task first so we have a known ID
const { task: created } = await adminTaskApi.createTask({
title: 'Schema validation test task',
});
const fetched = await adminTaskApi.getTask(created.id);
expect(fetched.id).toBe(created.id);
expect(fetched.title).toBe('Schema validation test task');
expect(validateTaskSchema(fetched)).toBe(true);
// Cleanup
await adminTaskApi.deleteTask(created.id);
});
test('GET /api/tasks/:id returns 404 for non-existent task', async ({ request }) => {
// Use raw request here since TaskApiClient throws on non-ok responses
const response = await request.get('/api/tasks/999999', {
headers: { Authorization: `Bearer ${process.env.ADMIN_TOKEN}` },
});
expect(response.status()).toBe(404);
const body = await response.json();
expect(body).toHaveProperty('error');
});
test('GET /api/tasks filters by status correctly', async ({ adminTaskApi }) => {
const completedTasks = await adminTaskApi.getTasksByStatus('completed');
expect(Array.isArray(completedTasks)).toBe(true);
completedTasks.forEach(task => {
expect(task.status).toBe('completed');
});
});
});
test.describe('Tasks API — POST', () => {
test('POST /api/tasks creates task and returns 201', async ({ adminTaskApi }) => {
const { response, task } = await adminTaskApi.createTask({
title: 'New API test task',
status: 'pending',
});
// Status code
expect(response.status()).toBe(201);
// Response body
expect(task.title).toBe('New API test task');
expect(task.status).toBe('pending');
expect(task.id).toBeDefined();
expect(typeof task.id).toBe('number');
// Full schema
expect(validateTaskSchema(task)).toBe(true);
// Cleanup
await adminTaskApi.deleteTask(task.id);
});
test('POST /api/tasks with missing title returns 400', async ({ request }) => {
const response = await request.post('/api/tasks', {
headers: {
Authorization: `Bearer ${process.env.ADMIN_TOKEN}`,
'Content-Type': 'application/json',
},
data: { status: 'pending' }, // no title
});
expect(response.status()).toBe(400);
const body = await response.json();
expect(body.error).toContain('title');
});
test('POST /api/tasks without auth returns 401', async ({ request }) => {
const response = await request.post('/api/tasks', {
data: { title: 'Unauthorized task' },
// No Authorization header
});
expect(response.status()).toBe(401);
});
});
test.describe('Tasks API — PATCH', () => {
test('PATCH /api/tasks/:id updates task correctly', async ({ adminTaskApi }) => {
// Create
const { task: created } = await adminTaskApi.createTask({
title: 'Task to update',
status: 'pending',
});
// Update
const { response, task: updated } = await adminTaskApi.updateTask(created.id, {
status: 'completed',
title: 'Updated task title',
});
expect(response.status()).toBe(200);
expect(updated.status).toBe('completed');
expect(updated.title).toBe('Updated task title');
expect(updated.id).toBe(created.id); // ID should never change
expect(updated.updatedAt).not.toBe(created.updatedAt); // timestamp should change
// Cleanup
await adminTaskApi.deleteTask(created.id);
});
test('regular user cannot update another user\'s task', async ({
adminTaskApi,
userTaskApi,
}) => {
// Admin creates a task
const { task } = await adminTaskApi.createTask({
title: 'Admin task — user should not update',
});
// User tries to update it
const { response } = await userTaskApi.updateTask(task.id, {
title: 'Hijacked title',
});
expect(response.status()).toBe(403);
// Cleanup
await adminTaskApi.deleteTask(task.id);
});
});
test.describe('Tasks API — DELETE', () => {
test('DELETE /api/tasks/:id returns 200 and task no longer exists', async ({
adminTaskApi,
}) => {
const { task } = await adminTaskApi.createTask({ title: 'Task to delete via API' });
const deleteResponse = await adminTaskApi.deleteTask(task.id);
expect(deleteResponse.status()).toBe(200);
// Try to fetch the deleted task — should be 404
const tasks = await adminTaskApi.getAllTasks();
const stillExists = tasks.find(t => t.id === task.id);
expect(stillExists).toBeUndefined();
});
test('regular user cannot delete admin task — returns 403', async ({
adminTaskApi,
userTaskApi,
}) => {
const { task } = await adminTaskApi.createTask({ title: 'Protected admin task' });
const deleteResponse = await userTaskApi.deleteTask(task.id);
expect(deleteResponse.status()).toBe(403);
// Cleanup as admin
await adminTaskApi.deleteTask(task.id);
});
});
Enter fullscreen mode
Exit fullscreen mode🔐 Auth API Tests — Token Flows & Security
// tests/api/auth-api.spec.ts
import { test, expect } from '../../fixtures/api.fixture';
test('successful login returns valid token structure', async ({ authApi }) => {
const tokens = await authApi.login({
email: process.env.USER_EMAIL!,
password: process.env.USER_PASSWORD!,
});
expect(typeof tokens.accessToken).toBe('string');
expect(tokens.accessToken.length).toBeGreaterThan(0);
expect(typeof tokens.refreshToken).toBe('string');
expect(typeof tokens.expiresIn).toBe('number');
expect(tokens.expiresIn).toBeGreaterThan(0);
});
test('invalid credentials return 401', async ({ request }) => {
const response = await request.post('/api/auth/login', {
data: {
email: 'notauser@test.com',
password: 'wrongpassword',
},
});
expect(response.status()).toBe(401);
const body = await response.json();
expect(body).toHaveProperty('error');
});
test('expired or invalid token returns 401 on protected route', async ({ request }) => {
const response = await request.get('/api/tasks', {
headers: {
Authorization: 'Bearer this.is.not.a.valid.token',
},
});
expect(response.status()).toBe(401);
});
test('refresh token returns new access token', async ({ authApi }) => {
// Login to get tokens
const initial = await authApi.login({
email: process.env.USER_EMAIL!,
password: process.env.USER_PASSWORD!,
});
// Use refresh token to get a new access token
const refreshed = await authApi.refreshToken(initial.refreshToken);
expect(typeof refreshed.accessToken).toBe('string');
// New access token should be different from the original
expect(refreshed.accessToken).not.toBe(initial.accessToken);
});
test('logout invalidates the token', async ({ authApi, request }) => {
// Login
const tokens = await authApi.login({
email: process.env.USER_EMAIL!,
password: process.env.USER_PASSWORD!,
});
// Logout
await authApi.logout(tokens.accessToken);
// Try to use the token after logout — should be rejected
const response = await request.get('/api/tasks', {
headers: { Authorization: `Bearer ${tokens.accessToken}` },
});
expect(response.status()).toBe(401);
});
Enter fullscreen mode
Exit fullscreen mode🔷 GraphQL API Tests
Many modern apps expose a GraphQL API alongside (or instead of) REST. Playwright handles it just as cleanly — GraphQL is just a POST to one endpoint.
// tests/api/graphql-api.spec.ts
import { test, expect } from '../../fixtures/api.fixture';
import { validateTaskSchema } from '../../utils/schema-validator';
// Helper to fire a GraphQL query/mutation
async function gql(
request: import('@playwright/test').APIRequestContext,
token: string,
query: string,
variables?: Record
) {
const response = await request.post('/graphql', {
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
data: { query, variables },
});
return response;
}
test('GraphQL query — fetch all tasks', async ({ request, authApi }) => {
const token = await authApi.getAdminToken();
const response = await gql(request, token, `
query GetTasks {
tasks {
id
title
status
assignee
createdAt
updatedAt
}
}
`);
expect(response.status()).toBe(200);
const body = await response.json();
expect(body).not.toHaveProperty('errors');
expect(Array.isArray(body.data.tasks)).toBe(true);
expect(validateTaskSchema(body.data.tasks[0])).toBe(true);
});
test('GraphQL mutation — create task', async ({ request, authApi }) => {
const token = await authApi.getAdminToken();
const response = await gql(
request,
token,
`
mutation CreateTask($title: String!, $status: TaskStatus) {
createTask(title: $title, status: $status) {
id
title
status
createdAt
}
}
`,
{ title: 'GraphQL created task', status: 'PENDING' }
);
expect(response.status()).toBe(200);
const body = await response.json();
expect(body).not.toHaveProperty('errors');
expect(body.data.createTask.title).toBe('GraphQL created task');
expect(body.data.createTask.id).toBeDefined();
});
test('GraphQL returns errors array on bad query — not HTTP error', async ({
request,
authApi,
}) => {
const token = await authApi.getAdminToken();
// GraphQL always returns 200 — errors live in the body
const response = await gql(request, token, `
query {
nonExistentField {
id
}
}
`);
expect(response.status()).toBe(200); // ← this is the GraphQL gotcha
const body = await response.json();
expect(body).toHaveProperty('errors');
expect(Array.isArray(body.errors)).toBe(true);
});
Enter fullscreen mode
Exit fullscreen modeThe last test is important — it catches the GraphQL testing gotcha that trips up most engineers. GraphQL almost always returns HTTP 200, even for errors. The actual error lives in body.errors. If you’re only asserting on the status code, you’ll miss half your bugs. 🎯
🔗 Chaining API + UI — The Most Powerful Pattern
This is the pattern that makes your entire test suite faster and more reliable.
The idea: Use the API to set up test data (fast, no UI overhead) — then use the UI to assert on what the user actually sees. Or flip it — interact via UI, then validate what hit the database via API.
// tests/api/api-ui-chain.spec.ts
import { test, expect } from '@playwright/test';
import { TaskApiClient } from '../../api/TaskApiClient';
import { AuthApiClient } from '../../api/AuthApiClient';
import { TaskPage } from '../../pages/TaskPage';
import { validateTaskSchema } from '../../utils/schema-validator';
test('seed task via API — verify it appears in UI', async ({ page, request }) => {
// Step 1 — Get token and create task via API (fast, no browser)
const authApi = new AuthApiClient(request);
const token = await authApi.getAdminToken();
const taskApi = new TaskApiClient(request, token);
const { task } = await taskApi.createTask({
title: 'API-seeded task for UI verification',
status: 'pending',
});
// Step 2 — Navigate to UI and verify the task is visible
const taskPage = new TaskPage(page);
await taskPage.goto();
await expect(
taskPage.getTaskLocator('API-seeded task for UI verification')
).toBeVisible();
// Cleanup via API — no UI overhead for teardown either
await taskApi.deleteTask(task.id);
});
test('create task via UI — verify it hit the API correctly', async ({
page,
request,
}) => {
const taskPage = new TaskPage(page);
await taskPage.goto();
// Listen for the POST and capture what was sent
let capturedTaskId: number | null = null;
const [response] = await Promise.all([
page.waitForResponse(
resp =>
resp.url().includes('/api/tasks') &&
resp.request().method() === 'POST' &&
resp.status() === 201
),
taskPage.createTask('UI-created task — verify via API'),
]);
const createdTask = await response.json();
capturedTaskId = createdTask.id;
// Now verify via API that the correct data was persisted
const authApi = new AuthApiClient(request);
const token = await authApi.getAdminToken();
const taskApi = new TaskApiClient(request, token);
const fetchedTask = await taskApi.getTask(capturedTaskId!);
expect(fetchedTask.title).toBe('UI-created task — verify via API');
expect(fetchedTask.status).toBe('pending');
expect(validateTaskSchema(fetchedTask)).toBe(true);
// Cleanup
await taskApi.deleteTask(capturedTaskId!);
});
test('bulk seed via API — UI pagination works correctly', async ({
page,
request,
}) => {
const authApi = new AuthApiClient(request);
const token = await authApi.getAdminToken();
const taskApi = new TaskApiClient(request, token);
// Create 25 tasks via API — in parallel for speed
const createdTasks = await Promise.all(
Array.from({ length: 25 }, (_, i) =>
taskApi.createTask({ title: `Pagination test task ${i + 1}` })
)
);
// Navigate to UI and check pagination renders correctly
const taskPage = new TaskPage(page);
await taskPage.goto();
// First page should show page size (assuming 10 per page)
await expect(page.getByRole('listitem')).toHaveCount(10);
await expect(page.getByTestId('pagination')).toBeVisible();
await expect(page.getByTestId('total-count')).toContainText('25');
// Cleanup all created tasks via API in parallel
await Promise.all(
createdTasks.map(({ task }) => taskApi.deleteTask(task.id))
);
});
test('delete via UI — confirm gone via API', async ({ page, request }) => {
// Seed task via API
const authApi = new AuthApiClient(request);
const token = await authApi.getAdminToken();
const taskApi = new TaskApiClient(request, token);
const { task } = await taskApi.createTask({
title: 'Task to delete from UI',
});
// Delete via UI
const taskPage = new TaskPage(page);
await taskPage.goto();
await taskPage.deleteTask('Task to delete from UI');
// Confirm UI updated
await expect(taskPage.getTaskLocator('Task to delete from UI')).not.toBeVisible();
// Confirm API also reflects deletion
const allTasks = await taskApi.getAllTasks();
const stillExists = allTasks.find(t => t.id === task.id);
expect(stillExists).toBeUndefined();
});
Enter fullscreen mode
Exit fullscreen modeThis is the pattern that catches the bugs your pure UI tests miss — when the UI says something is deleted but the database still has it. Or when the UI shows a task but the API returns it with wrong data. Catching the gap between what the user sees and what actually happened is where this shines. 🔥
📁 Final Project Structure After Part 4
Every file listed below has been fully built across Parts 1 through 4:
playwright-playbook/
├── tests/
│ ├── auth/
│ │ └── login.spec.ts ✅ Part 1
│ ├── tasks/
│ │ └── task-management.spec.ts ✅ Part 1
│ ├── network/ ✅ Part 2
│ │ ├── api-mocking.spec.ts
│ │ ├── error-simulation.spec.ts
│ │ └── network-assertions.spec.ts
│ ├── multi-user/ ✅ Part 3
│ │ ├── role-permissions.spec.ts
│ │ └── realtime-collaboration.spec.ts
│ ├── multi-tab/ ✅ Part 3
│ │ └── multi-tab-flows.spec.ts
│ └── api/ ✅ Part 4
│ ├── tasks-api.spec.ts
│ ├── auth-api.spec.ts
│ ├── graphql-api.spec.ts
│ └── api-ui-chain.spec.ts
├── pages/
│ ├── LoginPage.ts ✅ Part 1
│ ├── TaskPage.ts ✅ Part 1
│ └── DashboardPage.ts ✅ Part 3
├── api/ ✅ Part 4
│ ├── TaskApiClient.ts
│ └── AuthApiClient.ts
├── fixtures/
│ ├── auth.fixture.ts ✅ Part 1
│ ├── tasks.json ✅ Part 2
│ ├── empty-tasks.json ✅ Part 2
│ ├── tasks-har.har ✅ Part 2
│ ├── multi-user.fixture.ts ✅ Part 3
│ └── api.fixture.ts ✅ Part 4
├── scripts/
│ └── record-har.ts ✅ Part 2
├── utils/ ✅ Part 4
│ └── schema-validator.ts
├── .auth/ ← git-ignored
│ ├── admin.json
│ └── user.json
├── global-setup.ts ✅ Part 1
├── playwright.config.ts ✅ Part 1 (updated Parts 3 & 4)
├── .env ← git-ignored
└── package.json
Enter fullscreen mode
Exit fullscreen mode🗺️ What’s Coming in This Series
Part 1 — Stop Writing Tests Like a Beginner ✅ Done
Part 2 — Network Interception: The Complete Guide ✅ Done
Part 3 — Multi-User, Multi-Tab & Context Testing ✅ Done
Part 4 — API Testing (The Underrated Superpower) ← You are here
Part 5 — Visual Regression Testing
Part 6 — Debugging Like a Pro: Trace Viewer & Inspector
Part 7 — The CI/CD Setup Nobody Shows You
Part 8 — Playwright Meets AI: Agents, MCP & Self-Healing Tests
Enter fullscreen mode
Exit fullscreen modeIn Part 5, we add visual regression testing — toHaveScreenshot(), masking dynamic content, pixel tolerance config, and running VRT in CI without flakiness. The kind of bugs that slip past every assertion you’ve written so far.
🔖 Before You Go
After four parts, you’ve built something real:
-
A POM-based UI test layer with proper auth
-
A network interception layer that owns the API at the browser level
-
A multi-user layer that tests collaboration and permissions simultaneously
-
A raw API testing layer with typed clients, schema validation, and API-UI chaining
Each layer is independent. Each layer builds on the last.
And you’ve done it all in one tool, one language, one pipeline. No Postman. No separate pytest suite. No context switching. 💪
Follow me so you don’t miss Part 5 — where we catch the bugs that slip past every assertion: CSS regressions, layout shifts, and design inconsistencies — with Playwright’s visual regression testing.
Drop a comment below 👇
-
Are you currently running API tests in a separate tool from your UI tests?
-
Did the GraphQL gotcha (200 status with errors in body) catch you off guard?
-
What’s the first API endpoint you’d write a schema validation test for?
Let’s talk in the comments. 🙌
Faizal Shaikh | Senior Automation Engineer | Playwright & AI Testing
Connect with me on LinkedIn