Modal Dialog – Falcoma

🎭

How to automate this page

Modals are everywhere. These four tests cover the three close mechanisms and the accessibility escape hatch.

terminal # One-time setup
npm init playwright@latest

# Run your tests
npx playwright test

# Open the HTML report
npx playwright show-report

1 Modal opens when the button is clicked open state ▼

Click the trigger button and assert the modal dialog is visible. The modal uses a CSS class to control visibility, so Playwright's toBeVisible() correctly waits for it.

tetsing-lab.spec.ts

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

test('modal opens when the open button is clicked', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/modal-demo');

  await page.click('[data-testid=btn-open-modal]');

  await expect(page.locator('[data-testid=modal-dialog]')).toBeVisible();
});

2 Modal closes via the × close button close button ▼

Open the modal, then click the X. The dialog should disappear. Always assert closed state — do not assume success from no error.

tetsing-lab.spec.ts

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

test('close button dismisses the modal', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/modal-demo');

  await page.click('[data-testid=btn-open-modal]');
  await expect(page.locator('[data-testid=modal-dialog]')).toBeVisible();

  await page.click('[data-testid=btn-close-modal]');
  await expect(page.locator('[data-testid=modal-dialog]')).not.toBeVisible();
});

3 Modal closes when clicking the backdrop backdrop click ▼

Click outside the dialog box — on the dark overlay. Playwright's click() defaults to the element's center, so click at coordinates that land on the backdrop itself.

tetsing-lab.spec.ts

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

test('clicking the backdrop closes the modal', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/modal-demo');

  await page.click('[data-testid=btn-open-modal]');
  await expect(page.locator('[data-testid=modal-dialog]')).toBeVisible();

  // Click the backdrop outside the centered dialog
  await page.locator('[data-testid=modal-backdrop]').click({ position: { x: 5, y: 5 } });

  await expect(page.locator('[data-testid=modal-dialog]')).not.toBeVisible();
});

4 Pressing Escape closes the modal keyboard interaction ▼

Use page.keyboard.press() to send the Escape key. This is the accessibility close mechanic and must be tested separately from the button.

tetsing-lab.spec.ts

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

test('Escape key closes the modal', async ({ page }) => {
  await page.goto('https://falcoma.com/tetsing-lab/modal-demo');

  await page.click('[data-testid=btn-open-modal]');
  await expect(page.locator('[data-testid=modal-dialog]')).toBeVisible();

  await page.keyboard.press('Escape');

  await expect(page.locator('[data-testid=modal-dialog]')).not.toBeVisible();
});

🔐

Unlock Playwright Tutorial

Get the full automation guide for Modal Dialog Demo — real test code, step by step.

€ 1.99 one-time

Unlock for €1.99 →

🔒 Secure checkout · Instant access · No subscription

🪟 Modal Dialog Demo

Unlock Playwright Tutorial