Skip to content

Miscellaneous Elements

Web applications contain a variety of elements that serves many purposes. In this note, we will cover a few essential miscellaneous elements that you need to be able to automate.

We will cover the automation of the following elements :

  • Alert Popups
  • Modal Window
  • Windows (Tabs)
  • Dropdown selections



› Alerts (Pop-ups)

Alert is a small dialog message box that displays an important notification on the screen to give users a certain kind of information. It is important to remember that Alert is not part of the website; instead, it is part of the browser.

Since the Alert is not part of the website, in order to handle it, we need to tell the driver to switch focus from the website to the displayed pop-up alert. We can do this by writing the following code :

1
Alert alertPopup = driver.switchTo().alert();

Switching to Alert will result in returning of an Alert object. Through this Alert object, we can interact with the displayed Alert box.

To enter a text to the Alert text box: 

1
alertPopup.sendKeys("You're input text");

To get any text displayed on Alert box: 

1
String textContent = alertPopup.getText();

To click the "OK" button on Alert box: 

1
alertPopup.accept();

To click the "Cancel" button on the Alert box: 

1
alertPopup.dismiss();



As you have noticed, working with Alert is somewhat clumsy, and the modern browser disables them by default. For this reason, web developers generally avoid using Alerts on their web applications. Instead, they use a modal window. Unlike Alerts, the model window is part of the website, and as a result, it is highly customizable.

Since modal is part of the website, you don't have to switch the driver's focus to it. You can treat the elements inside the modal as any other WebElement. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
driver.get("http://www.uitestpractice.com/Students/Switchto");

By loc_launch_modal = By.cssSelector("[data-toggle='modal']");
WebElement launchModalButton = driver.findElement(loc_launch_modal);
launchModalButton.click();

// interacting with modal, clicking [Ok] button
By loc_modal_ok = By.cssSelector(".btn.btn-primary");
WebElement modalOkButton = driver.findElement(loc_modal_ok);
modalOkButton.click();



› Windows ( Tabs )

When you click an element that opens a new window ( tab ), the browser shifts focus to the newly opened window. However, the driver is still stuck in the old window. In order to work with the new window, we need to shift the driver's focus to this new window.

It is important to understand that each opened window in a browser has a unique identifier called Window Handle. You can get the window handle of the current window by using:

1
2
String currentWindowId = driver.getWindowHandle();
System.out.println(currentWindowId); // prints(ex):  CDwindow-E8F28CD42B66715C688F08C5C5333C07

You can also get all the opened windows on the browser by using: 

1
Set<String> handles = driver.getWindowHandles();  // Set is collection of unique items

You have to use the window handle to switch the driver's focus to the desired window. However, it is hard for the tester to distinguish open windows using the window handle. To identify each open window, we can use the window title.

You can get the title of the window that a browser and a driver are currently focused on by using: 

1
String title = driver.getTitle();

Using the title and the window handles, we can switch to any open window by utilizing the for-each loop. Here is the sample code for switching to the "New Tab" window from the above image: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Get window handle id for all the open window 
Set<String> handles = driver.getWindowHandles();

String targetTitle = "New Tab";

// Loop all the window handles one at a time
for(String id : handles) {
    // tell driver to switch focus one window at a time 
    driver.switchTo().window(id);

    // grab the current window title 
    String currentWindowTitle = driver.getTitle();

    // compare the current title with target title 
    boolean match = currentWindowTitle.equals(targetTitle);

    if(match) {
        break; // kill the loop
    }
}

// if the above for-each loop terminates at if-statement, then the driver's focus
// should be at the desired window.



Dropdown is one of the most common elements present in web applications. By default, the driver does not have a method to interact with it. To address this, Selenium provides Selectclass to interact with the dropdown element.

To interact with the dropdown element, first, extract the dropdown element as a WebElement and pass it into the Select object, which has all the necessary methods to interact with the dropdown elements. 

1
2
3
4
5
6
7
8
driver.get("https://www.facebook.com");

// Extracting dropdown element
By loc_dropdown = By.xpath("select#month");
WebElement dropdown = driver.findElement(loc_dropdown);

// Select class allows us to work with dropdown element 
Select dropdownSelection = new Select(dropdown);

As you can see from the code above, we now can interact with the dropdown element using the dropdownSelection variable that contains the Select object that wraps the dropdown object.

Selecting an option

To select the option with text value: 

1
dropdownSelection.selectByVisibleText("May");  // Selects "May" option

To select the option with index value ( index starts with 0 ):

1
dropdownSelection.selectByIndex(4);  // Selects "May" option

There is one more way to select an option, which is by using the value attribute. Here is what this dropdown element looks like behind the scene.

As you can see, each option has value attributes that have a text assigned to it.

1
2
3
4
5
6
7
8
<option value="5">May</option>

Element info
-----------------------------
tag name       :  option 
tag text       :  May
attribute      :  value 
attribute text :  "5"

We can use this value attribute to select a desired option from this dropdown using its text assigned: 

1
 dropdownSelection.selectByValue("5");  // Selects "May" option

Deselecting an option

If we can select an option from a dropdown, we can also de-select them. De-selecting the option works exactly the same as selecting the element, the only difference is their method name. 

1
2
3
dropdownSelection.deselectByVisibleText("May");  // deselects May option 
dropdownSelection.deselectByIndex(4);           // deselects May option
dropdownSelection.deselectByValue("5");          // deselects May option

Multi-select Dropdown

Sometimes more than one option can be selected from a dropdown. The Select class also have useful methods that allows us to interact with a multi-select dropdown.

To test whether a dropdown is multi-select or not, we simply use isMultiple() method. This method returns true if the dropdown supports multi-select, otherwise it will return false. 

1
2
Select numOptions = new Select(dropdown);
boolean result = numOptions.isMultiple();  // returns true in this case

To select multiple options like that you see in the example screenshot above, simply select the desired options one at a time. 

1
2
numOptions.selectByVisibleText("One");
numOptions.selectByVisibleText("Three");

To de-select, the multiple options, simply de-select them one by one. However, to de-select all of the selected items with one code. You can do as follows: 

1
numOptions.deselectAll();