Timingintermediate hidden bug 15 min

Dynamic Waits & Auto-Waiting — Practice in Playwright, Selenium & Cypress

Practice handling dynamic content and auto-waits in Playwright, Selenium, and Cypress. Replace sleep() with explicit expects and condition-based waits.

Live element

Hidden bug planted — try to catch it

🐞 Sort High→Low and watch your test catch a defect.

Locators cheat-sheet

data-testid	Role	Accessible label	What it is
start-btn	button	Start	Kicks off a delayed render (≈2s).
late-element	status	Late-arriving element	Appears asynchronously. 🐞 Occasionally never appears — explicit waits beat sleep().
waits-status	status	Status line	Shows current state: idle / waiting / ready.

Reference solutions

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

test('waits for the late element instead of sleeping', async ({ page }) => {
  await page.goto('/practice/dynamic-waits');
  const frame = page.frameLocator('iframe[title="Dynamic waits live widget"]');

  await frame.getByTestId('start-btn').click();

  // ❌ DO NOT: await page.waitForTimeout(2000);  // brittle + slow
  // ✅ DO: assert on the condition — Playwright auto-waits up to the test timeout.
  await expect(frame.getByTestId('late-element')).toBeVisible({ timeout: 5000 });
  await expect(frame.getByTestId('waits-status')).toHaveText('ready');
});

// 🐞 Planted flake: ~1% of runs the element never appears.
//    A sleep-based test would fail silently; an expect-with-timeout fails LOUDLY
//    with a clear "element not visible" message — easier to triage.

Try it in the Practice Hub Open learning module