Handling Any Types Of Listbox/dropdown In Selenium Webdriver

Hello Guys,

In this post we will learn how to handle a listbox/dropdown.

What is dropdown/listbox?

Suppose there is a form. This form consists below fields:

  1. Title
  2. Name
  3. Gender
  4. DOB: Day, Month, Year
  5. Country

If you notice, some of fields can accept value from some definite set of values. For example:

Title can be  any value from “Mr.”, “Mrs”, “Ms.” (ignoring some valid titles.)

Gender can be any value from “Male”, “Female” and “Others”.

Month can be any from 12 months. And so on.

So, generally developers displays acceptable list of values when  user wants to enter value in field. Refer below image:

This list of values displayed in a box is called list box or drop down. If you go in deep, you will find differences between drop down and list box but from selenium point of view, we can consider it just a box which has definite set of values.

How to create a drop down/ list box?

Dropdown/listbox can be created in so many ways . Some of examples are:

  1. Using <select> tag
  2. Using <div>,<ul>,<li> tags
  3. Using <div> ,<a>tag

Let me show you html codes:

A box of values developed using <select> tag:

If you open above html code, you will see web element as below:

A box of values developed using <div>,<ul> tags:

If you run above html code, you will see web element as below:

Clickable Dropdown

Click on the button to open the dropdown menu.

A box of values developed using <div>,<a> tags:

If you open above html code, you will see web element as below:

Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

Thanks to W3School for html codes.




You will notice list of values can be displayed based on user action as well. For example: Clicking or Hovering on element.

I will not consider how dropdwon/listbox are created. I will just consider them as a box of values. When I was in learning phase, I always used to use some solution provided on internet blindly without understanding html code.

I will discuss here a common way using which we can handle any types of dropdpwn/listbox.

Handling any type of dropdown:
I will combine all above html code in to single html file as below:

Above code will look like as below:

We will first understand the behavior of such dropdowns or listbox step by step:
Step 1: We perform some action like click or hover on a web element. We will name web element as menu.
Step 2: Action causes visibility of a set of web elements. We can name it as sub menu.
Step 3: We will perform action of sub menu like click or hover.

Same above steps we can handle in our code so that it will be able to handle these types of list box.

A generic method to handle dropdown:

Complete Java Program:

POM Class to store locators:

Test Script class:

Run above program and it will work for all three list boxes. I have given sleep method to just let you show that required operations are performed successfully.

If you have anyvdoubt or suggestions, feel free to comment or send me a mail.

If you like my posts, please like , comment, share and subscribe.

#HappyLearning




 

Author: Amod Mahajan

My name is Amod Mahajan and I am an IT employee with 4+ years of experience in Software testing and staying in Bengaluru. My area of interest is Automation testing. I started from basics and went throw so many selenium tutorials. Thanks to Mukesh Otwani as his tutorials are easy and cover basics to advance. I have habit of exploring concepts by deep diving. I used to make notes. I thought of sharing my knowledge through posts and now I am here. #KeepLearning #ShareLearning