Overlays

Popups / Modals

Intermediate

No rows yet — add via the modal.

Live widget · interact freely

Manual test goal

Open a focus-trapped modal, submit a form inside, and verify the body scroll lock + focus return on close.

Expected result

Modal opens, focus lands on the first input; close returns focus to the trigger and reveals the new entry.

Stable selectors

Open modal[data-testid="modal-open"]
Modal name input[data-testid="modal-name"]
Modal save[data-testid="modal-save"]
Saved row[data-testid="modal-row"]

Reference Playwright spec

modals.spec.ts

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

test('modal save renders new row and returns focus', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/modals');

  await page.getByTestId('modal-open').click();
  await page.getByTestId('modal-name').fill('Critical regression');
  await page.getByTestId('modal-save').click();

  await expect(page.getByTestId('modal-row')).toContainText('Critical regression');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idlemodals.spec.ts

https://lab.hakdogan.com/practice/modals

# console output will stream here