Usage of Selenium Select Class for Handling Dropdown Elements on a Web Page – Selenium Tutorial #13

In the previous tutorial, we studied about the various types of assert statements available in Java-based unit testing framework and their applications with specimens. Re-iterating the fact that being an “Automation Test Engineer”, assertions play a very decisive and significant role in developing test scripts.

Moving ahead with the few upcoming tutorials in the Selenium series, we would concentrate on handling the various types of web elements available on the web pages. Therefore, in this tutorial, we would consider “dropdowns” and exercise their handling strategies.

Before moving towards problem statement and its resolution, let us take a moment to introduce and create an understanding regarding the application under test. As a sample, we have created a dummy HTML page consisting of multiple and assorted web elements.

The elementary web elements those constitute the web page are:

Please take a reference to the following webpage aforementioned above:

What You Will Learn:

Explanation of Application under Test

We have designed the web page in a way to include a few fundamental types of web elements.

Subsequent is the HTML code used to create the above-mentioned webpage:

 <!DOCTYPE html>
<html>
<head><title> Testing Select Class </title>
<body>
<div id="header">
<ul id="linkTabs">
<li>
<a href="https://www.google.co.in/">Google</a>
</li>
<li>
<a href="http://abodeqa.wordpress.com/">abodeQA</a>
</li>
</ul>
</div>
<div class="header_spacer"></div>
<div id="container">
<div id="content" style="padding-left: 185px;">
<table id="selectTable">
<tbody>
<tr>
<td>
<div>
<select id="SelectID_One">
<option value="redvalue">Red</option>
<option value="greenvalue">Green</option>
<option value="yellowvalue">Yellow</option>
<option value="greyvalue">Grey</option>
</select>
</div>
</td>
<td>
<div>
<select id="SelectID_Two">
<option value="applevalue">Apple</option>
<option value="orangevalue">Orange</option>
<option value="mangovalue">Mango</option>
<option value="limevalue">Lime</option>
</select>
</div>
</td>
<td>
<div>
<select id="SelectID_Three">
<option value="selectValue">Select</option>
<option value="elephantvalue">Elephant</option>
<option value="mousevalue">Mouse</option>
<option value="dogvalue">Dog</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
confirm("Press a button!");
}
</script>
</body>
</html>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html> 

Scenario to be automated

WebDriver Code using Selenium Select Class

Please take a note that, for script creation, we would be using “Learning_Selenium” project created in the former tutorial.

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

Step 2: Copy and paste the below code in the “HandlingDropDown.java” class.

Below is the test script that is equivalent to the above-mentioned scenario:

 import static org.junit.Assert.*;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;

/**
 * class description
 */

public class HandlingDropDown {
       WebDriver driver;

       /**
        * Set up browser settings and open the application
        */

       @Before
       public void setUp() {
              driver=new FirefoxDriver();
             
// Opened the application
              driver.get("file:///F:/Work/Blogs/testingstuff/DemoWebAlert.html");
              driver.manage().window().maximize();
       }

       /**
        * Test to select the dropdown values
        * @throws InterruptedException
        */

       @Test
       public void testSelectFunctionality() throws InterruptedException { 
             
// Go to google
              driver.findElement(By.linkText("Google")).click();
             
// navigate back to previous webpage
              driver.navigate().back();
              Thread.sleep(5000);
             
// select the first operator using "select by value"
              Select selectByValue = new Select(driver.findElement(By.id("SelectID_One")));
              selectByValue.selectByValue("greenvalue");
              Thread.sleep(5000);
             
// select the second dropdown using "select by visible text"
              Select selectByVisibleText = new Select (driver.findElement(By.id("SelectID_Two")));
              selectByVisibleText.selectByVisibleText("Lime");
              Thread.sleep(5000);
             
// select the third dropdown using "select by index"
              Select selectByIndex = new Select(driver.findElement(By.id("SelectID_Three")));
              selectByIndex.selectByIndex(2);
              Thread.sleep(5000);       
       }

       /**
        * Tear down the setup after test completes
        */

       @After
       public void tearDown() { 
              driver.quit();
       }
} 

Code Walkthrough

Import Statements



Object Instantiation for Select class

Select selectByValue = new Select(driver.findElement(By.id(“SelectID_One”)));

We create a reference variable for Select class and instantiate it using Select class and the identifier for the drop down.

The identifier or the locator value for the drop down can be found using the techniques discussed in the initial tutorials (by using Selenium IDE and firebug).

Take a notice that the identifier for a dropdown can be found as below:

Step 1: Most or almost all the dropdowns elements are defined in the <Select> tag having multiple values (values that can be set into the dropdown) that are defined under the <option> tags.

Setting the value in the dropdown using selectByValue() method

selectByValue.selectByValue(“greenvalue”);

In the above java command, we select the value “green” in the drop down using the selectByValue() method and parameterizing it with the text present in the value attribute.

Setting the value in the dropdown using selectByVisibleText() method

selectByValue.selectByVisibleText(“Lime”);

In the above java command, we select the value “Lime” in the drop down using the selectByVisibleText() method and parameterizing it with the text present on the user interface or the text present between the opening and closing <option> tags.

Setting the value in the dropdown using selectByIndex() method

selectByValue.selectByIndex(“2”);

In the above java command, we select the third value in the drop down using the selectByIndex() method and parameterizing it with the index value of the element which is desired to be selected in the dropdown.

Take a note that the index value starts with “0”.

Conclusion

In this tutorial, we tried to make you acquainted with the WebDriver’s Select class that is used to handle dropdown elements present on the web page. We also briefed you about the methods that can be used to populate the value in the dropdown.

Here is the article summary:

Next Tutorial #14: In the forthcoming tutorial, we would discuss about various types of commands in WebDriver like isSelected(), isEnabled() and isDispalyed() those return a Boolean value against the presence of a specified web element.

Till then, stay tuned and automate the dropdown using WebDriver utility – “Select class”.