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
GoogleandabodeQAare 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 withOKandCancelbuttons 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 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
import org.openqa.selenium.support.ui.Select– Import this package before creating the script, it will refer to theSelectclass to request dropdown handling.
Initialize the object for the Select class
1 2 | Select selectByValue = new Select(driver.findElement(By.id(“SelectID_One”))); |
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
1 2 | selectByValue.selectByValue(“greenvalue”); |
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
1 2 | selectByValue.selectByVisibleText(“Lime”); |
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
1 2 | selectByValue.selectByIndex(“2”); |
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.
Epilogue
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:
- Handling static Drop down lists with Selenium Webdriver: https://vananhtooo.wordpress.com/2017/08/23/selenium-lam-viec-voi-drop-down-list/
- Handling dynamic drop down lists with Selenium Webdriver: https://vananhtooo.wordpress.com/2017/08/24/selenium-lam-viec-voi-drop-down-list-dong/