Handling Multi Select DropDown in Selenium WebDriverWe will see the following things in this tutorial. Show
DeSelect values from multi-select dropdown using the following Methods
Select value from dropdown having checkboxes as select option. Multi-Select DropdownWe will try to understand the examples by using the following HTML Page. The HTML source code for the sample page is as follows. Please copy it in a notepad and save the code as an HTML file. XHTML
How to Select Values from Multi-Select DropDown Using Selenium WebdriverThere are two ways to select multiple values from a multi-select dropdown
Example – Selecting multiple values from dropdown One by OneIn the following code, I am selecting the first option of the dropdown using its index and after that, I am selecting value ASP and Python by using selectByVisibleText method.Checkout the following script for better understanding.
Example – Selecting multiple values from dropdown using Action ClassThe Action Class will behave in the same way as you will do select multiple options. You will press the Ctrl button from Keyboard and then click on the desired options that you want to select. The approach is as follows. Create the WebElement object for the desired options that you want to select. Example:
The complete code is as follows
Deselect a Value from a Dropdwon Using deselectByIndex MethodWe can use deselectByIndex method to deselect any option using its index beginning from 0.
A complete example of all select methods has been given at the end of this article. Deselect a Value from a Dropdwon Using deselectByValue MethodWe can use deselectByValue method to deselect any option using value attribute of option tag.
A complete example of all deselect methods will be given below after discussing all deselect methods. Deselect a Value from a Dropdwon Using deselectByVisibleText MethodWe can use deselectByVisibleText method to deselect any option using the option visible text value.
A complete example of all deselect methods will be given below after discussing all deselect methods. What is Select Class in Selenium?In HTML, the dropdowns are generally implemented either using the <select> tag or the <input> tag. To perform certain operations on the dropdowns, which are declared using the <select> HTML tag, Selenium WebDrivers provides a class called "Select " class. As soon as you start typing the "Select " in your IDE, it will show the details as shown below: As we can see from the above screenshot, the "Select " class is provided by the "org.openqa.selenium.support.ui " package of Selenium WebDriver. You can create an object of the Select class, by-passing the object of the "WebElement" class, which shows the object returned by the corresponding locator of the WebElement. So, you can create the object of the Select class by using the following syntax: Select select = new Select(WebElement webelement);The Select class constructor accepts one parameter: the WebElement object returned by the locators of the specified element. The "Select " class provides various methods for handling the dropdown operations. The following figures list a few of them: Let's now understand the syntax and usage of various select and deselect methods provided by the "Select " class in Selenium WebDriver. How to select a value from a dropdown in Selenium?As highlighted in the above figure, the Select class of Selenium WebDriver provides the following methods to select an option/value from a drop-down (as highlighted by marker 1 in the above image):
Let's understand the syntax and usage of all these methods: selectByIndex:This method selects the dropdown option by its index number. We provide an integer value as the index number as an argument. It possesses the following syntax: selectByIndex(int arg0) : voidi.e., it accepts the index of the dropdown value, which needs to be selected. The index starts at 0. Suppose on the web page "https://demoqa.com/select-menu" we have the select the 4th value of the dropdown as highlighted below: As we can see, the above dropdown is being implemented using the <select> HTML tag, so we can use the "Select " class of Selenium WebDriver to select the option "Yellow " using the index as shown below: // Create object of the Select class Select se = new Select(driver.findElement(By.xpath("//*[@id='oldSelectMenu']"))); // Select the option by index se.selectByIndex(3);As we mentioned, the indices of dropdown start at 3, so the value "Yellow " can be selected using index 3. selectByValueThis method selects the dropdown option by its value. We provide a string value as the value as an argument. It possesses the following syntax: selectByValue(String arg0) : voidIf we consider the same dropdown on page "https://demoqa.com/select-menu", as in the previous section, we can see that each of the options of the dropdown has an assigned value as shown below: Now, if we have to select the option "White", we can use its value "6 ", as shown in the following code snippet: // Create object of the Select class Select se = new Select(driver.findElement(By.xpath("//*[@id='oldSelectMenu']"))); // Select the option with value "6" se.selectByValue("6");As the value "6 " corresponds to the option "White," so it will select the value "White" from the dropdown. selectByVisibleTextThis method enables one to select one option from the dropdown or multi-select dropdown based on the dropdown text. You need to pass the String value of the <select> element as an argument. It possesses the following syntax: selectByVisibleText(String arg0): voidIf we consider the same dropdown on page "https://demoqa.com/select-menu", as in the previous section, we can see that each of the options of the dropdown will have a text value, which is displayed on the web page also, so we can use that text to select the corresponding option, as shown below: // Create the object of the Select class Select se = new Select(driver.findElement(By.xpath("//*[@id='oldSelectMenu']"))); // Select the option using the visible text se.selectByVisibleText("White");As the dropdown has one of the options having the text as "White", the same will be selected using the above code. Apart from the dropdown types briefed above, the HTML <select> tag also provides ways to define dropdowns, which allows selecting multiple values. Let's see how a Multi-Select dropdown will be declared and how we can select multiple options in a dropdown using the "Select " class of Selenium WebDriver. How to select multiple values from a dropdown in Selenium?If the <select > tag contains multiple attributes, it means that the dropdown allows selecting multiple values. As we can see in the following screenshot from the web page "https://demoqa.com/select-menu": We can use any of the methods we used to select one value from the dropdown to select multiple values by invoking the methods multiple times for different values. The "Select " class provides a method, isMultiple(), using which we can first validate whether the dropdown allows us to select multiple values. Let's see how to use the isMultiple() method: How to check whether dropdown is Multi-Select?As we discussed, the Select class provides the "isMultiple() " method, which determines whether the web element in say supports multiple selections. It returns a boolean value, i.e., True/False, without taking any argument. It checks the attribute 'multiple'in the HTML code for the web element. Consequently, it possesses the following syntax: isMultiple(): booleanOnce you determine whether the web element is multi-select or not, you can use the Select class's various select methods on the multiple values you intend to select. The below example code shows the same- Select oSel = new Select(driver.findElement(By.xpath(//*[@id='cars']); if(oSel.isMultiple()){ //Selecting multiple values by index oSel.selectByIndex(1); oSel.selectByIndex(2); //Or selecting by values oSel.selectByValue("volvo"); oSel.selectByValue("audi"); //Or selecting by visible text oSel.selectByVisibleText("Volvo"); oSel.selectByVisibleText("Opel"); }And that is how you can select multiple values from a multi-select dropdown. Now that we have understood how we can select values from a dropdown, be it single-select or multi-select, we should have some way to check which values the dropdown contains and what all values are selected in the dropdown. The "Select " class provides methods to get options from the dropdown. Let's understand the details and usage of these methods: How to get options from a dropdown in Selenium?As highlighted by marker 2, in the image under the "Select " class section above, the Select class provides the following methods to get the options of a dropdown:
Let's understand the details of all these methods: getOptionsThere are times when you need to get all the options in a dropdown or multi-select box. This is where you can use the getOptions() method of the Select class. It possesses the following syntax: getOptions(): List<WebElement>As we can see, this method returns all the options of the dropdown as a list of WebElement. The following code snippet shows how we can get all the options of the dropdown on the page "https://demoqa.com/select-menu": Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); // Get all the options of the dropdown List<WebElement> options = select.getOptions();Using this method, we can retrieve all the options of a dropdown (be it single-select or multi-select ). getFirstSelectedOption()This method returns the first selected option of the dropdown. If it is a single-select dropdown, this method will return the selected value of the dropdown, and if it is a multi-select dropdown, this method will return the first selected value of the dropdown. It possesses the following syntax: getFirstSelectedOption(): WebElementAs we can see, this method returns a WebElement. The following code snippet shows how we can get the first selected option of the dropdown on the page "https://demoqa.com/select-menu": Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); // Get the first selected option of the dropdown WebElement firstSelectedOption = select.getFirstSelectedOption();Using this method, we can retrieve the first selected option of a dropdown (be it single-select or multi-select ). getAllSelectedOptions()This method returns all the selected options of the dropdown. If it is a single-select dropdown, this method will return the only selected value of the dropdown, and if it is a multi-select dropdown, this method will return all the selected values of the dropdown. It possesses the following syntax: getAllSelectedOptions():List<WebElement>As we can see, this method returns a list of WebElements. The following code snippet shows how we can get all the selected options of the dropdown on the page "https://demoqa.com/select-menu": Using this method, we can retrieve all the selected options of a dropdown (be it single-select or multi-select ). How to deselect a value from a dropdown in Selenium?Just like we select values in a DropDown & Multi-Select,we can deselect the values too. But the deselect method works only for Multi-Select. You can deselect pre-selected options from a Multi-select element using the different deselect methods discussed here. As we would have observed in the screenshot showing methods of the "Select " class (shown by marker 3), the Select class provides the following methods to deselect values of a dropdown:
Let's understand the details and usage of all these methods: deselectAllThis method will clear all the selected entries of the dropdown. It possesses the following syntax: deselectAll(): voidIf there are few options already selected in a dropdown, you can deselect all the options using the method deselectAll().The following code snippet shows a sample example, how we deselect all the values from the dropdown: Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); //Deselect all the options select.deselectAll();It will deselect all the options from the dropdown. deselectByIndexSimilar to the selectByIndex() method, the Select class also provides the method to deselect an option from the dropdown using the deselectByIndex() method. You can use the option's index number to deselect it. It possesses the following syntax: deselectByIndex(int arg0): voidSo, if there are few options already selected in a dropdown, you can deselect one of the options using the method deselectByIndex(). The following code snippet shows a sample example, how we deselect one of the values from the dropdown by specifying its index: Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); //Deselect first value by index select.deselectByIndex(1);It will deselect the option at index 1 in the dropdown. deselectByValueSimilar to the selectByValue() method, the Select class also provides the method to deselect an option from the dropdown using the deselectByValue() method. You can use the option's value to deselect it. It possesses the following syntax: deselectByValue(String arg0): voidSo, if there are few options already selected in a dropdown, you can deselect one of the options using deselectByValue(). The following code snippet shows a sample example, how we deselect one of the values from the dropdown by specifying its value: Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); //Deselect option with value "6" select.deselectByValue("6");It will deselect the option with value in the dropdown. deselectByVisibleTextSimilar to the selectByVisibleText() method, the Select class also provides the method to deselect an option from the dropdown using the deselectByVisibleText() method. You can use the option's text to deselect it. It possesses the following syntax: deselectByVisibleText(String arg0): voidSo, if there are few options already selected in a dropdown, you can deselect one of the options using the method deselectByVisibleText(). The following code snippet shows a sample example, how we deselect one of the values from the dropdown by specifying its text: Select select = new Select(driver.findElement(By.id("oldSelectMenu"))); //Deselect option with text "White" select.deselectByVisibleText("White");It will deselect the option with the text "White " in the dropdown. |