Modal Dialogs
In-page modals – not browser alerts. They can be closed with the X, with a button, by clicking the background or with the Escape key.
Small modal
This is a small modal. Close it with the button, the X, the Escape key, or by clicking the dark background.
Large modal
A longer modal so you can practise scrolling inside a dialog. Automation tip: wait for the dialog to be visible before clicking anything inside it, and wait for it to disappear before continuing – that is where most flaky tests come from.
Scroll down inside this dialog to reach the confirm button.
filler content
Practice tasks
- Open the small modal, assert it is visible, close it with the Close button and assert it is hidden.
- Open it again and close it with the X, then with the Escape key.
- Open the small modal and close it by clicking the dark background.
- Open the large modal, scroll inside it and click Confirm; assert the log shows confirmed.
- Assert that the page behind the modal cannot be clicked while it is open.
Sample automation code
driver.findElement(By.id("show-small-modal")).click();
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("small-modal-text")));
driver.findElement(By.id("close-small-modal")).click();
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.id("small-modal-text")));
await page.getByTestId('show-large-modal').click();
await expect(page.getByTestId('large-modal')).toBeVisible();
await page.getByTestId('confirm-large-modal').click();
await expect(page.getByTestId('modal-log')).toContainText('confirmed');
await expect(page.getByTestId('large-modal')).toBeHidden();