Part 1: Handling Drop-down Created Using SELECT Tag In Selenium
Hello Folks,
In last post we have seen an important topic in Selenium Webdriver which was Handling Any Types Of Listbox/dropdown In Selenium Webdriver. Method discussed in this post will work for all types of drop-down created using any tags.
Mostly drop-down are created using <select> tag and Selenium provides a special way to handle such drop-downs. It is very simple and easy.
We will cover below topics in this post:
- What is SELECT tag?
- Types of SELECT drop-downs.
- How to create drop-downs.
- What is Select class?
- Why we get UnexpectedTagNameException while using Select class?
What is <select> tag?
The <select> element, used along with one or more <option> elements, creates a drop-down list of options for a web form. The <select> element creates the list and each <option> element is displayed as an available option in the list.
Drop-down can be of two types:
1. Single select drop-down: You can select only single value at a time.
2. Multi select drop-down: You can select more than one value at a time.
Single select drop-down example:
If you open above html code in a browser, you will drop-down as below:
Select your language below:
Click on drop-down, you will see list of values. Choose any one value, that value will be shown as selected.
Multi select drop-down example:
To create a multiple drop-down, just you need to use “multiple” word within SELECT tag as shown below:
If you open above html code in a browser, you will drop-down as below:
Select your language below:
You can select multiple values from above drop-down using ctrl key.
Handling <select> tag drop-down in Selenium:
- Selenium developers provides a special class called “Select” to handle drop-down.
- “Select” class is in “org.openqa.selenium.support.ui” package.
- “Select” class models a SELECT tag and provides helper methods to select and deselect options.
Constructor in Select class:
I will explain a very common mistake done by Selenium beginners under this header.
As of now, we know “Select” class can be used only for SELECT tag drop-down. What happens when you try to use “Select” class for non SELECT tag drop-downs. Let’s see below example:
“Select” class provides an argument constructor which accepts a web element which should be a <select> tag web element. This constructor checks that the given web element is a SELECT tag or not. If it is not, then an UnexpectedTagNameException is thrown.
Let’s see an example here:
If you see above code, drop-down is created using UL tag in stead of SELECT tag. We will locate drop-down first and then we will pass drop-down web element to Select class constructor.
Program:
Output:
Above example demonstrates that you can not use “Select” class with any drop-down. You must need to be ensure if drop-down is created using SELECT tag.
Use of Select class for selecting/deselecting options will be covered in next posts.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappySelenium
Author: Amod Mahajan
A software Tester who is paid to judge products developed by others. Currently getting paid in American Dollars. Writing technical posts and creating YouTube videos are my hobbies.
Nice.. Thanks for sharing Good Stuff.
Thanks Gaurav.