Should I mock everything in UI tests?

No. Keep a small number of true end-to-end tests against the real backend, and use mocks for edge cases, error states, and tests that need predictable data.

Why do visual tests fail on a different machine?

Fonts and rendering vary by operating system and browser version, so screenshots differ slightly. Generate baselines where the tests normally run, usually CI.

Playwright Network Mocking and Visual Testing

Introduction

Two techniques make UI tests far more dependable: controlling the data the page receives, and comparing screenshots to detect unintended visual changes. Playwright supports both out of the box. This lesson shows how to intercept network calls and use screenshot assertions.

Prerequisites

Locators and assertions in Playwright
A basic understanding of HTTP requests

Step-by-Step Guide

Step 1: Mock an API response

page.route intercepts matching requests. Using route.fulfill, you return any status and body you like, so the test no longer depends on a live backend. Register the route before navigating.

test('shows mocked products', async ({ page }) => {
  await page.route('**/api/products', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([{ id: 1, name: 'Mock product' }]),
    });
  });

  await page.goto('/shop');
  await expect(page.getByText('Mock product')).toBeVisible();
});

Step 2: Simulate failures

Mocking is the easiest way to test error handling, which is hard to trigger against a real server.

await page.route('**/api/products', (route) =>
  route.fulfill({ status: 500, body: 'Server error' })
);

await page.goto('/shop');
await expect(page.getByText('Something went wrong')).toBeVisible();

Step 3: Add a screenshot assertion

toHaveScreenshot compares the page to a stored baseline image. The first run has no baseline, so Playwright saves one; later runs fail if pixels differ beyond a threshold.

test('home page looks right', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('home.png');
});

Step 4: Update baselines on purpose

When a visual change is intended, regenerate the baselines and review the diff in Git before committing.

npx playwright test --update-snapshots

Step 5: Keep visual tests stable

Baselines depend on the operating system and browser, so generate and compare them in the same environment, such as your CI container. Mask or avoid dynamic content like dates and ads that change every run.

FAQs

Should I mock everything in UI tests?: No. Keep a small number of true end-to-end tests against the real backend, and use mocks for edge cases, error states, and tests that need predictable data.
Why do visual tests fail on a different machine?: Fonts and rendering vary by operating system and browser version, so screenshots differ slightly. Generate baselines where the tests normally run, usually CI.

Summary

Mock the network to make tests fast and deterministic, and use screenshot assertions to catch visual regressions. Run visual tests in a consistent environment and update baselines deliberately.