Anti-Patterns Lab

Diagnose before you prescribe

Before you can write reliable tests, you need to recognise the patterns that make tests unreliable. Each card shows a real anti-pattern side-by-side with its fix — read the broken version first, predict how it fails, then confirm in the fixed version.

Learning goal: after reading this page you should be able to spot each of these patterns in a code review and explain the class of failure it causes — not just “this test is flaky”.

Asserting immediately after an async action

Clicking and reading the DOM in the same tick — before the UI has re-rendered — makes the test randomly fail under load.

Flaky

Broken

test('submit form', async ({ page }) => {
  await page.getByRole('button', { name: /submit/i }).click();
  // ❌ DOM has not re-rendered yet when this runs
  const text = await page.getByTestId('status').textContent();
  expect(text).toBe('Success');
});

Fixed

test('submit form', async ({ page }) => {
  await page.getByRole('button', { name: /submit/i }).click();
  // ✅ Auto-waiting matcher polls until the condition is met
  await expect(page.getByTestId('status')).toHaveText('Success');
});

Why it matters

Playwright's expect(...).toHave*() family polls with a timeout. Using it replaces manual synchronization and makes the test deterministic regardless of how fast the UI reacts.

How it shows up

Passes locally, fails on CI ~5 % of the time. Re-running the same test often makes the failure disappear.

Also known as:test flakinessasync raceread-before-render

Over-specific CSS selectors

Hand-crafted nth-child and deep descendant selectors couple the test to HTML structure. Any refactor — even cosmetic — breaks the test.

Brittle

Broken

// ❌ Breaks the moment a designer adds a wrapper div
await page.locator('div.container > section:nth-child(2) > ul > li:nth-child(3) > button.primary').click();

Fixed

// ✅ Role + accessible name survives markup refactors AND doubles as an a11y check
await page.getByRole('button', { name: /save changes/i }).click();

Why it matters

Tests should describe what the user sees, not how the page is assembled. Role-based locators are stable across layout changes AND serve as an accessibility audit — if your locator fails, a screen-reader user cannot find the button either.

How it shows up

A PR that only touches CSS or wraps a component for layout reasons causes a wave of unrelated test failures.

Also known as:selector couplinglocator rotstructural fragility

Static sleeps instead of conditional waits

page.waitForTimeout(3000) is a guess, not a synchronization primitive. It slows passing tests AND still fails when the real delay exceeds your guess.

Slow

Broken

test('user profile loads', async ({ page }) => {
  await page.goto('/profile');
  // ❌ Hopes 3 seconds is enough. Pays the cost whether it is or not.
  await page.waitForTimeout(3000);
  await expect(page.getByText('Welcome')).toBeVisible();
});

Fixed

test('user profile loads', async ({ page }) => {
  await page.goto('/profile');
  // ✅ Waits exactly as long as needed. Fails fast if the page never loads.
  await expect(page.getByText('Welcome')).toBeVisible({ timeout: 10_000 });
});

Why it matters

A sleep is a tax on every run AND a lottery: under load the real delay exceeds the sleep and the test fails anyway. Condition-based waits are both faster on the happy path and more diagnostic on failure.

How it shows up

Test suite duration keeps creeping up. A 'five-minute' suite balloons to twenty minutes with no new tests added.

Also known as:magic sleepsleep-based syncthread.sleep testing

Mutable state leaking between tests

Module-level variables, shared browser contexts, or a database without per-test reset mean test #50 depends on what test #12 did — and debugging which is impossible.

Unsafe

Broken

// ❌ Shared across all tests in the file — order-dependent, impossible to run in isolation
let userId: string;

test('create user', async ({ request }) => {
  const res = await request.post('/api/users', { data: { name: 'Alice' } });
  userId = (await res.json()).id;
});

test('update user', async ({ request }) => {
  // If 'create user' was skipped or failed, this is broken silently
  await request.patch(`/api/users/${userId}`, { data: { name: 'Bob' } });
});

Fixed

// ✅ Each test provisions and tears down its own state — runs in any order, in parallel
test('update user', async ({ request }) => {
  const { id } = await request.post('/api/users', { data: { name: 'Alice' } })
    .then(r => r.json());

  await request.patch(`/api/users/${id}`, { data: { name: 'Bob' } });

  // Cleanup via fixture / test.afterEach keeps DB clean
});

Why it matters

Tests should be independent. Shared state couples them — re-running one in isolation fails, and parallel execution becomes impossible. Fixtures (Playwright), before/after hooks, or per-test transactions give each test a clean slate.

How it shows up

`npx playwright test --grep update` fails but `npx playwright test` passes. Randomized test order reveals dozens of surprise failures.

Also known as:shared fixtureorder couplinghidden dependency

Using wall-clock time in assertions

Generating test data from Date.now() or asserting on 'today' makes the test a ticking bomb at midnight, timezone boundaries, or daylight-saving shifts.

Flaky

Broken

test('order shows today', async ({ page }) => {
  await page.goto('/orders');
  // ❌ Fails whenever the test run and the server straddle midnight
  const today = new Date().toLocaleDateString();
  await expect(page.getByTestId('order-date')).toHaveText(today);
});

Fixed

test('order shows today', async ({ page, browser }) => {
  // ✅ Freeze the clock so the test is deterministic regardless of run time
  const context = await browser.newContext({
    locale: 'en-US',
    timezoneId: 'UTC',
  });
  await context.addInitScript(() => {
    const fixedNow = new Date('2026-04-21T10:00:00Z').getTime();
    Date.now = () => fixedNow;
  });
  const fresh = await context.newPage();

  await fresh.goto('/orders');
  await expect(fresh.getByTestId('order-date')).toHaveText('4/21/2026');
});

Why it matters

Real-world clocks skew across runners, timezones, and DST transitions. Pinning time in the test gives you a single deterministic reference. For API tests, prefer an injectable Clock abstraction on the server and freeze it the same way.

How it shows up

Test is green all day and fails every night around 23:55. Works in the US, fails when CI runs in Sydney.

Also known as:midnight flaketimezone bug in testsambient time

← Back to all Labs

Diagnose before you prescribe

Learning goal: after reading this page you should be able to spot each of these patterns in a code review and explain the class of failure it causes — not just “this test is flaky”.

test('submit form', async ({ page }) => { await page.getByRole('button', { name: /submit/i }).click(); // ❌ DOM has not re-rendered yet when this runs const text = await page.getByTestId('status').textContent(); expect(text).toBe('Success'); });

test('submit form', async ({ page }) => { await page.getByRole('button', { name: /submit/i }).click(); // ✅ Auto-waiting matcher polls until the condition is met await expect(page.getByTestId('status')).toHaveText('Success'); });

test('user profile loads', async ({ page }) => { await page.goto('/profile'); // ❌ Hopes 3 seconds is enough. Pays the cost whether it is or not. await page.waitForTimeout(3000); await expect(page.getByText('Welcome')).toBeVisible(); });

test('user profile loads', async ({ page }) => { await page.goto('/profile'); // ✅ Waits exactly as long as needed. Fails fast if the page never loads. await expect(page.getByText('Welcome')).toBeVisible({ timeout: 10_000 }); });

// ❌ Shared across all tests in the file — order-dependent, impossible to run in isolation let userId: string; test('create user', async ({ request }) => { const res = await request.post('/api/users', { data: { name: 'Alice' } }); userId = (await res.json()).id; }); test('update user', async ({ request }) => { // If 'create user' was skipped or failed, this is broken silently await request.patch(`/api/users/${userId}`, { data: { name: 'Bob' } }); });

// ✅ Each test provisions and tears down its own state — runs in any order, in parallel test('update user', async ({ request }) => { const { id } = await request.post('/api/users', { data: { name: 'Alice' } }) .then(r => r.json()); await request.patch(`/api/users/${id}`, { data: { name: 'Bob' } }); // Cleanup via fixture / test.afterEach keeps DB clean });

test('order shows today', async ({ page }) => { await page.goto('/orders'); // ❌ Fails whenever the test run and the server straddle midnight const today = new Date().toLocaleDateString(); await expect(page.getByTestId('order-date')).toHaveText(today); });

test('order shows today', async ({ page, browser }) => { // ✅ Freeze the clock so the test is deterministic regardless of run time const context = await browser.newContext({ locale: 'en-US', timezoneId: 'UTC', }); await context.addInitScript(() => { const fixedNow = new Date('2026-04-21T10:00:00Z').getTime(); Date.now = () => fixedNow; }); const fresh = await context.newPage(); await fresh.goto('/orders'); await expect(fresh.getByTestId('order-date')).toHaveText('4/21/2026'); });