Automate Modal Windows with Selenium WebDriver

Java Practice with Code Walkthrough

Modals

A modal is a popup window that when displayed, deactivates all other content on the page. It’s commonly used to encourage a user to take an action (e.g., give their e-mail address to sign up for something or disable their ad blocker).

Let’s use Selenium WebDriver to engage with this modal. After navigating to URL https://the-internet.herokuapp.com/entry_ad that triggers the modal, let’s check if the modal is actually displayed. First, we’ll find the modal using the XPath locator strategy with selector “//div[@class=’modal’]”.

We’ll type WebElement modal = driver.findElement(By.xpath()), and that 𝘟𝘗𝘢𝘵𝘩 is “//𝐝𝐢𝐯[@𝐜𝐥𝐚𝐬𝐬=’𝐦𝐨𝐝𝐚𝐥’]”.

WebElement modal = driver.findElement(By.xpath("//div[@class='modal']"));

Now we code if (modal.isDisplayed()) and print a message. Let’s word the message as “modal is displayed”.

if (modal.isDisplayed()) {
   System.out.println("modal is displayed");
}

Then we interact with the modal’s elements just as we would with any other elements. To close the modal, we locate the modal’s Close icon and call click().

So we proceed to coding driver.findElement(By.xpath()), pass in the 𝘟𝘗𝘢𝘵𝘩 of “//𝐩[𝐧𝐨𝐫𝐦𝐚𝐥𝐢𝐳𝐞-𝐬𝐩𝐚𝐜𝐞()=’𝐂𝐥𝐨𝐬𝐞’]”, and then we’ll call click().

driver.findElement(By.xpath("//p[normalize-space()='Close']")).click();

Let’s print a message for the cases when the modal doesn’t display. So we type:

else
   System.out.println("modal is not displayed");

Now the entire conditional looks as follows:

if (modal.isDisplayed()) {
   System.out.println("modal is displayed");
   driver.findElement(By.xpath("//p[normalize-space()='Close']")).click();
  } else
   System.out.println("modal is not displayed");

It’s time to run this script. But when we do, our modal window doesn’t display.

We might be dealing with race conditions, i.e. trying to interact with an element too soon, before it’s shown on the page. We can use the WebDriverWait class to explicitly wait for that condition before continuing with the interaction.

Let’s create a new variable called wait, which is an instantiation of the WebDriverWait class. This constructor accepts an instance of WebDriver and the Duration of time to wait for a condition to be met before timing out and throwing an exception. We’ll set that to 2 seconds- Duration.ofSeconds(2).

var wait = new WebDriverWait(driver, Duration.ofSeconds(2));

Now with this wait object, we can specify the explicit condition to wait for, which is for the modal window to be displayed. So we’ll type wait.until, then in parentheses we’ll add an expected condition. Fortunately, WebDriver provides an ExpectedConditions class that contains several convenience methods, such as the visibilityOf(). Inside of this method, we can specify which element we want to wait for and we’ll say the modal. This will wait for up to two seconds for the modal to become visible before attempting to interact with it.

wait.until(ExpectedConditions.visibilityOf(modal));

Let’s run this again. Perfect, we see that we were able to successfully interact with the modal.

Full Code

ModalWindows.java:

import java.time.Duration;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import static io.github.bonigarcia.wdm.WebDriverManager.chromedriver;

public class ModalWindows {

 static protected WebDriver driver;

 public static void main(String[] args) {
  chromedriver().setup();
  WebDriver driver = new ChromeDriver();

  driver.get("https://the-internet.herokuapp.com/entry_ad");
  WebElement modal = driver.findElement(By.xpath("//div[@class='modal']"));

  var wait = new WebDriverWait(driver, Duration.ofSeconds(2));
  wait.until(ExpectedConditions.visibilityOf(modal));

  if (modal.isDisplayed()) {
   System.out.println("modal is displayed");
   driver.findElement(By.xpath("//p[normalize-space()='Close']")).click();
  } else
   System.out.println("modal is not displayed");

  driver.quit();
 }

}

𝓗𝒶𝓅𝓅𝓎 𝓉𝓮𝓈𝓉𝒾𝓃𝓰 𝒶𝓃𝒹 𝒹𝓮𝒷𝓊𝓰𝓰𝒾𝓃𝓰!

I welcome any comments and contributions to the subject. Connect with me on LinkedIn, X , GitHub, or Insta. Check out my website.

If you find this post useful, please consider buying me a coffee.