🪟 Modal Interactions

Test modal and dialog patterns — opening, closing, keyboard trapping, form autofill inside overlays, and confirmation flows. Uses the native <dialog> element.

🔲
Basic modal Open / close. Tests backdrop click and Escape key.
⚠️
Confirmation dialog Yes / No / Cancel. Tests which action was taken.
📋
Form in modal Name + email. Client-side validation — nothing is sent.
🔐
Login in modal Password-manager target. Demo only — no real auth.
🔔
Alert variants Success, warning, error, and info dialogs.
⧉
Nested modal Opens a second dialog from within the first.

Basic modal

This is a basic modal dialog. It can contain any content — text, images, or controls.

Close it by clicking the ✕ button, pressing Escape, or clicking the backdrop.

await page.locator('[data-testid="dialog-basic"]').waitFor();

⚠️ Confirm action

Are you sure you want to delete this item? This action cannot be undone. (Demo — nothing actually happens.)

Newsletter sign-up

Demo form — nothing is subscribed or stored.

🔐 Sign in

Demo only — not real auth. Any filled fields show a success screen.

Outer modal

This is the first (outer) modal. Click the button below to open a nested (inner) dialog on top of this one.

data-testid="dialog-nested-outer"

Inner modal

This is the inner dialog, stacked on top of the outer one.

data-testid="dialog-nested-inner"