_edited_edited.png)
A drop-down list also known as a drop-down menu that allows the user to choose one value or multiple values from a list by clicking on the element. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value. It is often used in the design of graphical user interfaces. Dropdown menus are an essential element of many web applications, providing users with a convenient way to select options from a list. As an SDET it is very crucial to understand how to handle dropdown menus effectively. In this blog, we will explore different ways to handle dropdown menus in Selenium.
There are 3 different types of dropdowns to handle in Selenium
1. Select dropdown
2. Bootstrap dropdown
3. Hidden dropdown
In Selenium, when you have the Select tag in the HTML, you can use the predefined class called Select Class. Select class provides different helper methods which can be used by creating an object of the Select class by using the new keyword.
First you need to identify the locator of the web element of the dropdown element on the web page. Choose the appropriate method provided by selenium like ID, Class, ClassName, Xpath, CSS selector and capture the location of the dropdown web Element.
Select by Visible Text: If the select class has the options tag with Value and Visible Text options available, then you can use the SelectbyVisibleText() method to choose the desired Value by instantiating the Select object by passing the Web Element as a parameter.
Select by Value: If the select class has the options tag with Value and Visible Text options available, then you can use the SelectbyValue() method to choose the desired Value by instantiating the Select object by passing the Web Element as a parameter.
Select by Index: Sometimes, dropdown options are not uniquely identified by their text or value. Then in such situations you can use selectByIndex() Method, which selects the value based on the index. The Index starts from 0 and increments for each option available in the dropdown menu.
Capturing and printing the options in the dropdown menu: In order to capture the number of options in the dropdown menu we can use getOptions () method and use for loop to print the options from the dropdown.
Handling multi-select dropdowns: Dropdown menus have the option to select multiple values from the dropdown. The below is possible if you have Select tag in the HTML. There is a method .isMultiple() method which is used to check if the dropdown option is multi select or only one value is selectable from the dropdown. The method isMultiple() returns a Boolean value and gives True if the dropdown is multi select and False if the dropdown is not multi select and only one option is selectable.
Bootstrap dropdown: In Selenium, when you don’t have the Select tag in HTML, then it is called Bootstrap dropdown. Select class is not available in Bootstrap. You will have to click on the button so that the dropdown is visible and then select the option. Select single option from the dropdown.
Path to the Chrome driver is set, and new instance of the Chrome Driver is instantiated.
Driver.get() Method opens the specified URL, Impicit Wait waits for the specified time and maximize() method will maximize the web application that is opened using the get() Method.
All options under the dropdown are located using the By.Xpath() option and by clicking on the dropdown menu using the click().
Capturing the list of options in the dropdown menu by locating the element using the Xpath and printing the options by writing a for loop. getText() method will convert the webelement into Text and will print it on the console using the System.Out.println() Method.
An ‘if’ Statement checks if the option’s text match with the desired values(“Brazil”), and if so, the option need to be clicked.
The below code is used to select multiple options from the dropdown menu. Select Class is not available in Bootstrap dropdown. Instead of the Select class, you need to use Selenium’s basic WebElement methods to interact and locate the elements and use the size() method to get the number of options available in the dropdown. You can use enhanced for loop to loop through the options and use getText() Method to get the text of the list of options and print them on the console. Write a if loop to select the required values from the list and use the click() method for selecting the options from the dropdown.
Path to the Chrome driver is set, and new instance of the Chrome Driver is instantiated.
Driver.get() Method opens the specified URL, Impicit Wait waits for the specified time and maximize() method will maximize the web application that is opened using the Url.
All options under the dropdown are located using the By.Xpath() option and by clicking on the dropdown menu using the click().
Capturing the list of options in the dropdown menu by locating the element using the Xpath and printing the options by writing a for loop. getText() method will convert the webelement into Text and will print it on the console using the System.Out.println() Method.
An ‘if’ Statement checks if the option’s text match with the desired values(“Appium”, “AWS”, “Playwright”, “Selenium WebDriver”), and if so, the option need to be clicked.
Hidden Dropdowns: Hidden dropdowns are the trickiest to handle. To Handle Hidden dropdown values or Auto suggestions we come across while using E-commerce websites, we can handle them using DOM Trick using EventListener.
In Hidden dropdown when you enter a search text, it will give auto-suggested values, or when you click on a dropdown and try to inspect the values of the auto-suggested values or dropdown values it will disappear and will not let you inspect. And the values will not appear in the HTML and are hidden. To inspect such disappearing elements and automate such dropdown values you will have to go to the application by using the driver.get() Method which will open the website.
Locate the WebElement for the search box and enter the value in the search box by using the sendkeys() Method. It will give the auto suggestions for the value entered in the search box.
If you try to inspect the auto suggestion dropdown values, it will disappear. In order to capture the options, go to the Developer tool that usually appears on the right side of your screen. Click on the EventListeners tab
Click on the blur option from the list, you will see the ‘Remove’ button. Click on the remove button.
Now you will be able to inspect and find the location of the elements. Hover over the dropdown values and it highlights in the HTML too.
Drill down to the WebElement by clicking on the <li> tag and going down till the class where you can find the unique xpath to locate that webElements.
Once you get the Xpath, assign the web elements to a List and loop through the list by writing the ‘for’ loop. Convert the Web Elements from the list into Text by using the getText() Method. You can count the number options by using the size() method. Below is the code and the output.
Another way to handle Hidden Auto suggestion Dropdown using DOM Debugger Trick. For some React application or Salesforce application where the blur property is not available in EventListener to remove the property, you can use the DOM Debugger trick to pause the debugger and inspect the elements. There are two ways you can use the Debugger.
Go to the application that you want to inspect (for ex. www.flipkart.com). Enter the value in the search box and it will populate the auto suggestions for the entered text. Right click and inspect to get the location of the WebElement. Go to the ‘sources’ tab and click on the ‘+New snippet’ option, it will open up Script snippet# , enter debugger; in the snippet. Right click on the Script Snippet # and click on ‘Run’
The entire screen will be paused in the debugger.
Now you can click on the up arrow or the Elements tab and inspect any web element.
You can release the debugger after the inspection is done and you have inspected the element.
The other option to handle Hidden Auto suggestion Dropdown using DOM Debugger is by using SelectorsHub. SelectorsHub provides an option to pause the debugger and inspect the elements.
SelectorsHub is a xpath plugin and cssSelector plugin. It can be used as smart editor to write and verify xpath, cssSelector, Playwright selectors, jQuery and JS Path. SelectorsHub can also be used to auto generate the unique #xpath, css Selector and all possible selectors. You can add the plugin for SelectorsHub from the below link.
Go to SelectorsHub and click on Turn on Debugger option.
It will take around five seconds to pause the entire screen. Once the screen is frozen, paused in debugger is shown on the screen.
Now you can click on the up arrow (select an element in the page to inspect it) or the Elements tab and inspect any web element.
You can release the debugger after the inspection is done and you have inspected the element.
Happy Learning !!!
.png)
Crystal clear Explanation