Playwright Basics
Beginner course
Modal Windows Automation Practice
Practice interacting with, asserting, and closing modal dialogs and overlays in your test suites.
Beginner10 min4 scenarios8 test cases
Interactive Scenarios
S01Simple Modal
Not opened yet
S02Modal from Repeated Card
Advanced Locators
Hard course
S03Dynamic ID Modal
Not opened yet
S04Missing Locator Modal
Not opened yet
Showing 8 test cases
| ID | Scenario | Type | Priority | |
|---|---|---|---|---|
| MDL_001 | Simple modal can be opened Expected: Modal dialog becomes visible on screen ✅ positivehigh | positive | high | |
| MDL_002 | Simple modal can be closed Expected: Modal dialog is removed from screen and result updates ✅ positivehigh | positive | high | |
| MDL_003 | Scoped modal from card can be opened Expected: Correct modal tied to the card becomes visible ✅ positivehigh | positive | high | |
| MDL_004 | Scoped modal from card can be closed Expected: Modal is closed and result updates ✅ positivemedium | positive | medium | |
| MDL_005 | Dynamic ID modal can be confirmed Expected: Confirm button is successfully located and clicked ✅ positivemedium | positive | medium | |
| MDL_006 | Missing locator modal can be accepted via ARIA Expected: Accept button is successfully located without a test id ✅ positivehigh | positive | high | |
| MDL_007 | Modal background overlay exists Expected: Overlay prevents interaction with background elements ⚠️ edgelow | edge | low | |
| MDL_008 | Modal can be closed by clicking outside Expected: Clicking the backdrop closes the modal ⚠️ edgemedium | edge | medium |
Overview
Modal windows (or dialogs) overlay the main content, demanding user attention. Automating them requires locating the newly active DOM elements, often relying on ARIA roles or specific container classes.
1 · Locating Modals
Modern frameworks handle modals well, but you should explicitly wait for or locate the modal container to ensure it has fully rendered before interacting with its contents.
TypeScript
const modal = page.getByRole('dialog');
await expect(modal).toBeVisible();2 · Interacting Inside Modals
Once the modal is visible, scope your locators to the modal container to prevent accidentally interacting with elements in the background page.
TypeScript
await modal.getByRole('button', { name: 'Confirm' }).click();
await expect(modal).toBeHidden();Method Summary
| Action | Selenium | Playwright JS | Playwright PY | Cypress |
|---|---|---|---|---|
| Locate Modal | driver.findElement() | page.getByRole('dialog') | page.get_by_role('dialog') | cy.get('.modal') |
| Scope Element | modal.findElement() | modal.getByRole() | modal.get_by_role() | cy.get('.modal').find() |
FAQ