TESTHEON Practice Lab

Playwright foundations · Synchronization

Playwright Waits Lab

Practise Playwright auto-waiting and web-first assertions with bounded delays, loading states, API requests, progress, and lazy content.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Synchronization strategy

Wait for evidence, not elapsed time

Playwright auto-waits before actions such as click and fill. Web-first assertions retry against a live locator, so an assertion liketoBeVisible() expresses the user-facing condition directly.

Avoid waitForTimeout(): it guesses how long the application needs and is either slower than necessary or flaky under load. For network-driven behavior, begin waitForResponse() before the action, then assert what the response changed in the page.

  1. Action: let the locator wait for actionability.
  2. State: use a web-first assertion on visible output.
  3. Network: wait for a specific response when it matters.
  4. Fallback: use explicit polling only for non-DOM state.

Active delay: 1,000 ms. Add ?delay=0 for fast automation.

Element appears after N seconds

The trigger schedules one bounded reveal; assert the target rather than sleeping.

Element becomes enabled

The target remains a native disabled button until the controlled delay completes.

Target is disabled.

Text changes

A stable status node changes content after the selected delay.

Build pending.

Spinner becomes content

The loading indicator is removed and replaced by a named content region.

Skeleton becomes content

A labelled placeholder is replaced by the completed card.

Progress bar reaches 100%

The bar advances on a deterministic schedule and exposes its numeric value.

0%

Progress: 0%.

Background request updates a counter

A real Practice API response increments a visible counter; local preview uses a deterministic fallback.

Completed requests: 0

No request completed.

Concurrent requests produce one combined result

Three resources run together and the final result appears only after all settle.

Combined result is idle.

Delayed dropdown population

The select remains disabled until its deterministic options exist.

Lazy-loaded images and sections

Scroll the fixture into view to load a local image and reveal the related section.

Lazy practice module

Waiting to enter the viewport.

Infinite scroll with an end state

A bounded 25-item list appends five rows per intersection and then reports completion.

    Preparing list.

    Passing examples

    Start with observable behavior

    These snippets match executable tests stored inexamples/playwright-ts/.

    Web-first visibility assertion
    await page.getByRole('button', { name: 'Start appearance wait' }).click();
await expect(page.getByTestId('appeared-element')).toBeVisible({ timeout: 11_000 });
    Wait for a specific response
    const response = page.waitForResponse((candidate) =>
  candidate.url().includes('/practice/api/v1/users') && candidate.status() === 200,
);
await page.getByRole('button', { name: 'Run background request' }).click();
await response;
await expect(page.getByTestId('network-counter')).toHaveText('1');

    Learning objective

    What you will be able to do

    Replace arbitrary sleeps with an assertion or event tied to the exact visible, network, or progress state that completes the workflow.

    Continue learning

    Guide and related practice

    Read the Playwright E2E guide →