Handling DropDowns in Selenium

Example

Let us take an example in which we will automate the following procedures:

1. Invoke Google Chrome Browser.
2. Open the URL of the web page containing the dropdown menu.
3. Select the option of your choice from the dropdown menu.
4. Close the browser.

We will create the test case step by step in order to have a better understanding about how to handle dropdowns in WebDriver.

Step 1. Launch Eclipse IDE and create an open test suite "Demo_Test".

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

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

Step 3.  Now coming to the coding ground.

1. To invoke the Google Chrome browser, we need to download the ChromeDriver.exe file and set the system property of "Running test on Chrome Browser" as the path of the ChromeDriver.exe file. Here is the sample code snippet to set system property for Chrome driver:

// System Property for Chrome Driver   
System.setProperty("webdriver.chrome.driver","Location to the chromedriver.exe");  

You can also try this code with Online Java Compiler

Run Code

2. After that we have to initialize the Chrome driver using ChromeDriver Class.

Here is the sample code snippet to initialize Chrome driver using ChromeDriver class.

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

You can also try this code with Online Java Compiler

Run Code

By combining both of the above code blocks, we will get the below code to launch the Google Chrome browser.

// System Property for the Chrome Driver   
System.setProperty("webdriver.chrome.driver","Location to the chromedriver.exe"

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

You can also try this code with Online Java Compiler

Run Code

3. Now, we need to write the code which will automate our second test procedure(navigate to the chosen URL). Here is sample code to navigate to the chosen URL:

// Launch the Website  
driver.navigate().to("URL of web page containing dropdown menu");  

You can also try this code with Online Java Compiler

Run Code

The complete code till now will look like below:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  

public class Dropdwn_Test{ 

	public static void main(String[] args){            

    	// System Property for the Chrome Driver
		System.setProperty("webdriver.chrome.driver","Location to the chromedriver.exe");  

   		// Instantiating the ChromeDriver class.      
	   	WebDriver driver=new ChromeDriver();  

	  	// Launch the Website
  		driver.navigate().to("URL of web page containing dropdown menu");        
   	}  
}  

You can also try this code with Online Java Compiler

Run Code

Step 4. Now we will locate the dropdown menu by inspecting its HTML codes by following the below steps :

1. Open URL: URL of web page containing dropdown menu
2. Right-click on the dropdown menu on the sample web page and select Inspect Element
3. It will launch a window containing all the specific codes involved in the development of the dropdown menu.
4. Take a note of its id attribute.

Step 5. To automate our third test procedure, we need to write the code which will select the option of your choice from the dropdown menu.
Here is the sample code :

//Using the Select class for selecting value from the dropdown  
Select dropdown = new Select(driver.findElement(By.id("dropdown ID")));
dropdown.selectByVisibleText("Option to select");  

You can also try this code with Online Java Compiler

Run Code

Hence, our final test script will look like this:  

import org.openqa.selenium.By;  
import org.openqa.selenium.support.ui.Select;  
import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  

public class Dropdwn_Test{
	public static void main(String[] args){  

    	// System Property for the Chrome Driver   
        System.setProperty("webdriver.chrome.driver","Location to the chromedriver.exe");
        // Instantiating the ChromeDriver class.      
        WebDriver driver = new ChromeDriver();  

		// Launch the Website
       	driver.navigate().to("URL of web page containing dropdown menu");   

		//Using the Select class for selecting value from the dropdown  
		Select dropdown = new Select(driver.findElement(By.id("dropdown ID")));  
		dropdown.selectByVisibleText("Option to select");  
     	
		// Closing the Browser  
       	driver.close();  
	}  
}

You can also try this code with Online Java Compiler

Run Code

The following picture shows the Eclipse window for the test script.

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




Upon execution, the above test script will launch the Chrome browser and automate all the test procedures.

Check this out : Xpath in Selenium

FAQs

1. How to handle dropdowns without a select tag?

Ans: Click on the dropdown web element. Store all dropdown options into a list. Fetch all options using for loop and then using the if condition we can select the chosen option.
 

2. How to deselect a value from dropdown in Selenium?

Ans: Similar to select methods, we have various utility methods of deselection like deselectAll(), deselectByIndex(), deselectByValue(), etc.
 

3. How to get all options in the dropdown in Selenium?

Ans: All the options in a dropdown in Selenium can be extracted with the help of Select class which has getOptions() method. This method retrieves all the options on Select tag and returns a list of the web elements.
 

4. What is a dynamic dropdown?

Ans: A dynamic dropdown list is a convenient way of selecting data without making changes to the source. 

Key Takeaways

In this blog, we have discussed how to handle dropdowns in Selenium WebDriver. We discussed the ‘Select’ class and its various utility methods. In the end, we discussed an example with a complete explanation of handling dropdowns in Selenium WebDriver.

We hope that this blog helped you enhance your knowledge regarding DropDowns in Selenium WebDriver. Learning never stops, and to learn more and become more skilled, head over to our practice platform Coding Ninjas Studio, to practice top problems, attempt Mock Tests, and read informative blogs, and interview experiences. Do upvote our blog to help other ninjas grow. 

Happy Learning!