Selenium WebDriver - Handling drop-downs

Selenium WebDriver - Handling drop-downs

Throughout this section, you can learn how to manage drop-downs throughout Selenium WebDriver.

Before continuing with this portion, let us first understand some of the fundamentals of managing drop-downs in Selenium WebDriver.

Select in Selenium WebDriver

The 'select' module in Selenium WebDriver is used for selecting and deselecting option in a dropdown. The objects of Select form may be initialized by passing the dropdown webElement as parameter to its constructor.

WebElement testDropDown = driver.findElement(By.id("testingDropdown"));  
Select dropdown = new Select(testDropDown);  

How to select an option from drop-down menu?

WebDriver provides three ways to select an option from the drop-down menu.

1. selectByIndex - It is used to select an option based on its index, beginning with 0.

dropdown.selectByIndex(5);

2. selectByValue - It is used to select an option based on its 'value' attribute.

dropdown.selectByValue("Database");

3. selectByVisibleText - It is used to select an option based on the text over the option.

dropdown.selectByVisibleText("Database Testing");  

Let us consider a test case in which we will automate the following scenarios:

• Invoke Google Chrome Browser
• Open URL: https://www.testandquiz.com/selenium/testing.html
• Select the option "Database Testing" from the drop-down menu
• Close the browser

To give you a better understanding of how to treat drop-downs in WebDriver, we will build our test case step by stage.

Step 1 - Launch Eclipse IDE and open the new "Demo_Test" test series, which we built in earlier tutorial sessions.

Step 2 - Right click on the "src" folder and create a new Class File from New > Class.

Give your Class name as "Dropdwn_Test" and click on "Finish" button.

Step 3 - Let's get to the world of coding.

• To activate the Google Chrome plugin, we need to import the ChromeDriver.exe file to the directory of the ChromeDriver.exe file and set the system property "Running Check on Chrome Browser." We have covered this in previous tutorial sessions already. You may also refer to "Chrome Browser running test" to know how to download and configure system properties for chrome driver.

Here's the sample code for Chrome driver to assign system property:

// System Property for Chrome Driver   
System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe"); 

We have to configure Chrome driver with ChromeDriver Class after that.

• Here's the sample code for Chrome driver to load using the ChromeDriver package.

// Instantiate a ChromeDriver class.      
r driver=new ChromeDriver();  

Combining all of the code blocks above, we'll get the code snippet for Google Chrome apps to open.

// System Property for Chrome Driver   
m.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe");  
// Instantiate a ChromeDriver class.      
river driver=new ChromeDriver();  

• Before that we would need to compose the code that would simplify our second test scenario (navigate to the URL you want).

Below is the sample code for navigating to the URL you want to use:

// Launch Website  
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");  

The complete code till now will look something like this:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  
public class Partial_Link 
{  
    public static void main(String[] args) 
	{  
          
        // System Property for Chrome Driver   
System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe"); 
  
        // Instantiate a ChromeDriver class.      
    WebDriver driver=new ChromeDriver();  
  
        // Launch Website  
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");         
    }  
  
}  

Step 4 - We shall now attempt to find the drop-down menu by reviewing the HTML codes.

To find the drop-down menu on the sample web page, follow the steps provided below.

• Open URL: https:/www.testandquiz.com/selenium/testing.html
• Right-click on the sample web page in the dropdown menu and select Inspect Element

This will open a window which contains all the different codes involved in the drop-down menu creation.

Step 5 - To automate our third test scenario, we need to compose the code from the drop-down menu that will pick the option "Database Testing"

Here's the sample code to:

//Using Select class for selecting value from dropdown  
Select dropdown = new Select(driver.findElement(By.id("testingDropdown")));  
dropdown.selectByVisibleText("Database Testing");  

Thus, our final test script will look something like this:

import org.openqa.selenium.By;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  
import org.openqa.selenium.support.ui.Select;  
  
public class Dropdwn_Test  {  
  
    public static void main(String[] args) {  
          
       // System Property for Chrome Driver   
        System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe");  
  
        // Instantiate a ChromeDriver class.      
        WebDriver driver=new ChromeDriver();  
  
        // Launch Website  
        driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");   
  
  
//Using Select class for selecting value from dropdown  
      
Select dropdown = new Select(driver.findElement(By.id("testingDropdown")));  
dropdown.selectByVisibleText("Database Testing");  
  
    // Close the Browser  
        driver.close();  
    }  
}  

Step 6 - Right click on the Eclipse code and select Run As > Java Application.