DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Azure Virtual Machines
  • Step Into Serverless Computing
  • Building the World's Most Resilient To-Do List Application With Node.js, K8s, and Distributed SQL
  • Building a Robust Data Engineering Pipeline in the Streaming Media Industry: An Insider’s Perspective

Trending

  • Azure Virtual Machines
  • Step Into Serverless Computing
  • Building the World's Most Resilient To-Do List Application With Node.js, K8s, and Distributed SQL
  • Building a Robust Data Engineering Pipeline in the Streaming Media Industry: An Insider’s Perspective

WebDriverIO Tutorial For Handling Dropdown In Selenium

While dealing with access forms, you'd often have to handle dropdown. Here's how you can handle them with WebDriverIO in Selenium using 'Select' class.

Aditya Dwivedi user avatar by
Aditya Dwivedi
·
Jun. 08, 20 · Tutorial
Like (1)
Save
Tweet
Share
3.84K Views

Join the DZone community and get the full member experience.

Join For Free

While performing automated browser testing, there’ll be plenty of times when you’d have to handle the dropdown menu. Often used in forms, dropdown works great when it comes to conserving space and preventing users from choosing the wrong option in a form. I’d have rarely come across a form without dropdown to select a field from multiple options. Thereby, it becomes vital that while testing any website or access form, we know how to handle dropdown with WebDriverIO as well.

To perform operations on the dropdown, the ‘Select’ class can be used in Selenium WebdriverIO. In this WebDriverIO tutorial, I'll explore how to use ‘Select’ to handle dropdown with WebDriverIO.

What Are The Different Types Of Dropdown In WebDriverIO?

There are majorly two kinds of dropdowns you would often find on a website. 

  • Normal dropdown
  • Custom dropdown

Normal Dropdown 

dropdown list

Normal dropdowns are the ones we usually encounter while handling access forms in Selenium. It’s easy to identify a normal dropdown, you just have to open the element tab in the browser and see that dropdown HTML tag. HTML tag should be <select> and the ‘id’ should be ‘dropdown’. 

Here is an example of a normal dropdown: 

HTML
 




x


 
1

          
2
<select id="dropdown">
3
    <option value="" disabled="disabled" selected="selected">Please select an option</option>
4
    <option value="1">Option 1</option>
5
    <option value="2">Option 2</option>
6
  </select>
7

          



Custom Dropdown 

Since with <Select> there aren't many styling options, developers use custom dropdowns. As we discussed, custom dropdowns are not developed using the <Select> tag but with <div> tag or some other custom tag-based on the frontend framework. 

flight summary

Here is an example of custom dropdown: 

HTML
 




xxxxxxxxxx
1
11


 
1

          
2
<div class="fsw_inputBox travelFor inactiveWidget ">
3
   <label data-cy="travellingFor" for="travelFor">
4
      <span class="lbl_input latoBold appendBottom10">Travelling For</span><input data-cy="travelFor" id="travelFor" type="text" class="hsw_inputField font20" readonly="" value="">
5
      <div class="code latoBold font14 blackText makeRelative">
6
         <p></p>
7
         <p class="font14 greyText">Select a Reason (optional)</p>
8
      </div>
9
   </label>
10
</div>
11

          



Now, you know the difference between these two dropdowns. In Selenium test automation, custom dropdowns are handled based on the event defined by the developer while normal dropdowns are handled by a special Selenium class object called ‘Select’ class.

How To Handle Dropdown With WebDriverIO?

It’s pretty straight forward to handle dropdown in WebDriverIO! There isn’t a separate class object like Java or any other programming language. Here, the dropdown is also accessed by the simple Selenium locators in WebDriverIO. 

With the given HTML example on the normal dropdown, you can find dropdown objects using the below syntax using ID selector.

Const drp = $("#dropdown");

There are two options for dropdowns. 

  • Single value dropdown

  • Multiple value dropdown

There is no difference to access single or multiple value dropdowns except multiple value dropdowns allow the user to select multiple values from dropdown options. 

WebDriverIO provides the following operation on the dropdown. 

  • selectByIndex

  • selectByVisibleText

  • selectByAttribute

selectByIndex

You can select the dropdown in value by providing the index of the value. The index is nothing but the position of the dropdown value. The index always starts at 0. So, the first value is considered as the 0th Index.  

options one and two

Here, Option 1 is considered as index 0 and Option 2 is index 1

Syntax:

$("selector").selectByIndex(index) 

If you want to select Option 1 then you can use the below code.

$("#dropdown").selectByIndex(0)

Note: Avoid using selectByIndex when the dropdown value changes dynamically as the value index gets changed frequently. 

selectByVisibleText

Another option is selectByVisibleText. This option is very safe to use as we need to use dropdown visible text displayed in the dropdown value. 

e.g

option 1 and 2

We can use Option 1 or Option 2 as a selection

Syntax:

$("Selector").selectByVisibleText(text)

If you want to select option 2 using selectByVisibleText() then use below code;

$("#dropdown").selectByVisibleText("Option 2")

Note: When you use selectByVisibleText() keep the visible text as it is or else the element will not identify. 

selectByAttribute

selectByAttribute() is something new compared to other frameworks for Selenium test automation. Usually, in other Selenium test automation framework, you’d be using selectByValue option which allows the user to select dropdown using value attribute only. However, WebDriverIO provides a feature to use any attribute and its value exists in the dropdown. 

Syntax:

$("Selector").selectByAttribute(attribute, value)

Here, the attribute parameter could be any attribute from <option> tag, and the value parameter is the value of the provided attribute. 

If you consider normal HTML dropdown code, you can see only one attribute that is “value”. In case, any other attribute provided then you can use that as well.

$("#dropdown").selectByAttribute("value", "1")

Multiple Value Dropdown 

If you see the <select> tag has multiple= "true" attribute then this dropdown can select multiple options. When you automate multiple value dropdowns, you have to call the above-explained methods multiple times. 

WebDriverIO as of now does not provide a selectAll() or deSelectAll() method option for multiple value dropdown. You need to write custom code for the same as shown below.

How To Select All Dropdown Methods?

JavaScript
 




xxxxxxxxxx
1
10


 
1
 it("select all dropdown value", function () {
2
       browser.url("https://html.com/attributes/select-multiple/");
3
       browser.pause(5000);
4
       const list = $$("select option");
5
       list.forEach((element) => {
6
           element.click();
7
       });
8
       browser.pause(5000);
9
   });
10

          



A similar way you can deselect the all value by running the same code two times. If you want to select a particular dropdown value from multiple value dropdown then you can 

use if condition within for loop.  

All In All

In this WebDriverIO tutorial, I explored how to handle dropdown with WebDriverIO and it’s methods. It’s easy to handle dropdown with WebDriverIO as you don’t have to use any additional class object. When you compare with Selenium there is one class that is a select class and using it you can perform actions on the dropdown also. 

There is no dedicated method to deselect dropdown values in WebDriverIO but by custom code logic, you can perform Selenium test automation as shown in the above example in this WebDriverIO tutorial. 

That’s all folks, I hope you liked this WebDriverIO tutorial for Selenium test automation. Help us reach out to more of your peers by retweeting us and sharing this article on social media. Happy Testing!

Attribute (computing)

Published at DZone with permission of Aditya Dwivedi. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Azure Virtual Machines
  • Step Into Serverless Computing
  • Building the World's Most Resilient To-Do List Application With Node.js, K8s, and Distributed SQL
  • Building a Robust Data Engineering Pipeline in the Streaming Media Industry: An Insider’s Perspective

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: