Popups & Dialogs
Practice automating native browser dialogs, custom modals, and toasts.
1. JavaScript Dialogs
Challenge Tasks (3)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
2. Custom Popups / Modals
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
3. Tooltips
Challenge Tasks (1)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
About this Popups & Dialogs page
A JavaScript dialog is a browser-native popup, such as alert, confirm or prompt, that blocks the page until it is handled. In Selenium you switch to it with driver.switchTo().alert() and call accept, dismiss or sendKeys. Playwright uses the page dialog event, and Cypress listens to window:alert and window:confirm. HTML modals are normal elements and need regular locators.
Frequently asked questions
How do you handle an alert in Selenium?
Call driver.switchTo().alert() in Java, or driver.switch_to.alert in Python, then use accept() to click OK or dismiss() to cancel. Use getText() to read the message. Wrap the switch in WebDriverWait with ExpectedConditions.alertIsPresent() so the test does not fail with NoAlertPresentException.
How do you handle a confirm dialog in Playwright?
Register page.on('dialog', dialog => dialog.accept()) or dialog.dismiss() before the click that opens it. Playwright auto-dismisses dialogs if no listener exists, so the handler must be attached first. Use page.once for a single dialog, and dialog.message() to assert the text.
How do you type into a JavaScript prompt?
In Selenium call alert.sendKeys('text') then accept(). In Playwright call dialog.accept('text'). In Cypress stub window.prompt with cy.window().then(win => cy.stub(win, 'prompt').returns('text')). Dismissing a prompt returns null to the page, which is a useful negative test.
What is the difference between a JavaScript alert and a modal dialog?
An alert, confirm or prompt is drawn by the browser, blocks all script and cannot be found with locators. A modal is ordinary HTML and CSS in the DOM, so you locate its buttons like any element and wait for it to be visible. They need different automation code.
How do you test an alert in Cypress?
Cypress accepts alerts automatically and fires window:alert. Assert the message with cy.on('window:alert', text => expect(text).to.equal('Hello')). For confirm, return false from cy.on('window:confirm') to cancel. Register the listener before the action that triggers the dialog.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: