Async

Lazy Loaded Elements

Intermediate

Live widget · interact freely

Manual test goal

Wait for a lazily mounted module to become visible and assert against its hydrated content.

Expected result

After ~1.2s the module heading 'Hydrated panel' appears; selectors must wait, not poll-by-sleep.

Stable selectors

Trigger lazy[data-testid="lazy-trigger"]
Lazy panel[data-testid="lazy-panel"]

Reference Playwright spec

lazy-load.spec.ts

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

test('wait for lazily mounted module', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/lazy-load');

  await page.getByTestId('lazy-trigger').click();
  await expect(page.getByTestId('lazy-panel')).toBeVisible({ timeout: 5_000 });
  await expect(page.getByTestId('lazy-panel')).toContainText('Hydrated panel');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlelazy-load.spec.ts

https://lab.hakdogan.com/practice/lazy-load

# console output will stream here