Handling DropDown And Multiple Select in Webdriver

In our last conversation, we’d seen the handling of Checkbox & Radio Buttons in Webdriver. The next set of HTML fields that you commonly interact with includes Dropdown and Multiple Select. In today’s post, we’ll discuss the best ways to work with these elements. The most basic approach for handling them is first to locate their element <group>. We’ve labeled it as a <group> because none of the Dropdown and Multiple Select is a singular entity. They do have the same identity which serves to hold more than one elements. You can simply think both of them as containers for holding multiple options. The only difference between the Dropdown and Multiple Select fields is the deselecting statement & the multiple selections which don’t apply to Dropdowns. Let’s now look at the point by point summary of what we are going to address here.

  1. Select Class in Selenium Webdriver.
  2. Different Select Methods with Html sample and Webdriver example.
    1. selectByVisibleText Method.
    2. selectByIndex Method.
    3. selectByValue Method.
  3. DeSelect Methods supported with Html sample and Webdriver example.
    1. deselectByIndex Method.
    2. deselectByValue Method.
    3. deselectByVisibleText Method.
    4. deselectAll Method.
  4. Live animated GIF to illustrate deselect/multi-select actions.

If you wish to go through the fundamental Webdriver commands, then please mind reading it from here.

Handling DropDown And Multiple Select in Webdriver.

1- Select Class in Selenium Webdriver.

It is the Webdriver class which provides the implementation of the HTML SELECT tag. It exposes several “Select By” and “Deselect By” type methods. You can apply these methods to manipulate the selection in the DropDown and Multiple Select object. This class is the part of the Selenium’s <org.openqa.selenium.support.ui.Select> package. Apart from its unique capability, the Select class acts normally. You can define it using the <new> keyword following the standard syntax.

Select select = new Select(<WebElement object>);

You must pass the dropdown or multi-select element object as shown in the above code else it’ll cause the compile-time error in Eclipse IDE.

You can get more clarity on using the <Select> class, just look at the below Java code.

 

Note: For your information, the Selenium <Select> class only supports the elements belonging to the HTML’s <select> tags.

Once you got the <Select> object initialized then, you can access all the methods given by the <Select> class. Please refer the below sections for details over the <Select> class methods.

Dropdown and Multiple Select Actions Using Webdriver Select Class Methods.

Selenium Webdriver Select Class Methods.

In the below sections, you’ll get to know how to work with DropDown and Multiselect elements. In the Webdriver’s <Select> class, there are many interesting operations available for these fields. Next, we hope that you are already aware of the characteristics of a DropDown in the HTML code. If yes, then you would easily understand the HTML source code that we’ve provided for every select/deselect method. This Html will present a regular dropdown box on the web page.

Let’s now read about the most used select/deselect methods.

 

2- Different Select Methods with Html sample and Webdriver example.

2.1- selectByVisibleText Method.

Command Syntax- select.selectByVisibleText(<Text>);
Usage- It selects all options that match the input text in the argument. It won’t consider any index or value, and it’ll only match the visible text in the dropdown field.

Please refer the below sample Html file which we’ll use to demonstrate the usage of this method.

Example:
HTML sample code.

Below is the Java code to select the value based on the visible text.

 

2.2- selectByIndex Method.

Command Syntax- select.selectByIndex(Index);
Usage- It performs the selection based on the index value supplied by the user.

Every Dropdown field has an attribute which holds the index values. We specify it as <values>.

Example:
HTML sample code.

You can use the same Html code as given in the previous method.

Here is the Webdriver’s Java code that simulates the select the value by index.

 

2.3- selectByValue Method.

Command Syntax- select.selectByValue(Value);
Usage- It selects the options that satisfy the value supplied by the user in the argument.

Example:
HTML sample code.

 

This Webdriver code shows how to select a value using the <selectByValue> method.

 

3- DeSelect Methods with Html sample and Webdriver example.

3.1- deselectByIndex Method.

Command Syntax: select.deselectByIndex(<Index>);
Usage: Use it when you want to deselect any option via its index. It accepts the index as argument.

Please follow the live example given at the end of this section.

 

3.2- deselectByValue Method.

Command Syntax: select.deselectByValue(<Value>);
Usage: Use it when you wish to deselect all options using a value that matches the value in the dropdown options.

Please follow the live example given at the end of this section.

 

3.3- deselectByVisibleText Method.

Comand Syntax: select.deselectByVisibleText(<Text>);
Usage: Use it to deselect all options by supplying the input text that matches the text in the dropdown options.

Please follow the live example given at the end of this segment.

 

3.4- deselectAll Method.

Command Syntax: select.deselectAll( );
Usage: Use it to turn off all the selected entries at once. But you can use this method if the <Select> tag has <multiple> attribute enabled in the Html. Otherwise, it’ll throw the <NotImplemented> exception. Hence, it’s compulsory to have an attribute like <multiple=”multiple”> while defining the <Select> tag.

Please follow the live example given below.

Example:
HTML sample code for illustrating the <dropdown and multiple select> operations.

 

Webdriver code to exhibit the actions on the <dropdown and multiple select> elements.

 

4- Live animated GIF to illustrate deselect/multi-select actions.

Let’s watch the DropDown And Multiple Select actions using Webdriver commands.

DropDown And Multiple Select Actions Using Webdriver Commands

DropDown And Multiple Select Actions Using Webdriver Commands.

 

Best,

TechBeamers.

Leave a Reply


*