Handling dropdown lists with Selenium Webdriver

Tram Ho

We can use Selenium WebDriver to process the Dropdown list because it supports checking the values ​​of the DropDown list using the Select class. First we create an HTML page that includes many basic web components like:

  • Hyperlink (link)
  • Button
  • Dropdown (list option)

For example, the image below:

Explanation of the Application under Test:

The site is designed to include several basic types of web elements:

  • Hyperlink : 2 links named Google and abodeQA are provided to redirect users directly to the page ” https://www.google.co.in/” and ” http://www.abodeqa.com/” when clicked.
  • Button : The "try it" button is created to display a popup with OK and Cancel buttons when clicked.
  • Dropdown : 3 dropdown list: color dropdown, fruit dropdown, animal dropdown is created to select color, fruit and animals respectively. 3 dropdown list has been set the default value.

The HTML code used to create the website mentioned above:

Script to run tests automatically

  • Launch the web browser and open the test page (test page on image)
  • Click the “Google” link on the test page
  • Navigate back to the original website (test page above)
  • Select “Green” in the color dropdown list
  • Select “Orange” from the fruit dropdown list
  • Select “Elephant” from the animal dropdown list

WebDriver code using Selenium Select class

It is possible to reuse the project created in the previous articles to continue this section.

Step 1: Create a new java class named “HandlingDropDown” inside the “Learning_Selenium” project.

Step 2: Copy and paste the following code into the “HandlingDropDown.java” class. This is the code equivalent of the scenario mentioned above:

Code Walkthrough

Import Statements

  • import org.openqa.selenium.support.ui.Select – Import this package before creating the script, it will refer to the Select class to request dropdown handling.

Initialize the object for the Select class

We create a reference variable for the Select class named selectByValue and initialize it using the Select class and identifier for the target dropdown (in this example, we are pointing to the first color dropdown list with id = “SelectID_One). “)

The identifier or locator value for the dropdown can be found using the search techniques found in previous articles (using Selenium IDE and firebug).

How to find the identifier for a dropdown list:

Almost all of the dropdown lists components are contained within <select> … </select> tags, the inner list option consists of multiple values ​​(forming a set of drop-down lists), one for each price. The / option value is placed in the <option> … </option> tag (Figure below).

Method 1: Use the selectByValue() method to set the value for the dropdown

In the above statement, we select the value “green” in the dropdown list using the selectByValue() and parameterize it with the value of the value (value = ‘greenvalue’) attribute:

Here is how to select the option based on the value of the value attribute in the tag. This method should be used for high accuracy, avoiding data duplication.

Method 2: Use the selectByVisibleText() method to set the value for dropdown

In the above statement, we select the value “Lime” in the second dropdown list using the selectByVisibleText() and parameterize it with the text value displayed directly on the user interface (the text in the tag pair <option> </option>). This is an option based on the value of the text displayed in the UI.

Method 3: Use the selectByIndex() method to set the value for dropdown

In the above statement, we select the 3rd option in the dropdown list by using the selectByIndex() and parameterizing it with the index (ordinal) value of the element. Here is how to select the option based on the order of the option in the list, the index is started from 0.


Above is the basic knowledge about handling dropdown translated from: https://www.softwaretestinghelp.com/selenium-select-class-selenium-tutorial-13/

In addition, in fact, the dropdown is divided into static drop down lists with dynamic drop down lists, and how to handle each type you can refer to the following article:

Share the news now

Source : Viblo