Join us on :

Dropdowns

Generally, while working with the script we have to select some values from the dropdown and do other activity and validate. The dropdown is just like simple WebElement like Checkbox, textbox etc.

Dropdown is a list of items that appear when clicking on a button or text selection. While automating any website or page tester comes across with selectable elements in drop-down list.

dropdowns-webdriverio

In this chapter, we will learn how to deal with DropDown elements and it's options. There are different ways to select the dropdown options in the WebdriverIO.

  • selectByIndex
  • selectByVisibleText
  • selectByAttribute

selectByIndex function in WebdriverIO

We can select the dropdown by specifying the which option we want to select. Here the option will be given based on their position in the dropdown.

Position is nothing but at index the option is present, the index starts with 0. dropdown-index-webdriverio Syntax:


									$(selector of dropdown ).selectByIndex(index)
									



									it('Select dropdown with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/dropdowns')
										$("select#first").selectByIndex(2)
									});
									


Selecting te dropdown will not be effective because Index will change when developer inserts a new option before the target option

selectByVisibleText in WebdriverIO

selectByVisibleText() function will select element in dropdown by giving the text or option in drop-down. This is the simplest method and more reliable to use.

Syntax:


									$(selector of dropdown).selectByVisibleText(text)
									


Code of selecting dropdown option


									it('Select dropdown with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/dropdowns')
										$("select#first").selectByVisibleText("Yahoo")
									});
									


I have changed the text case in below code, and this fails


									it('Select dropdown with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/dropdowns')
										$("select#first").selectByVisibleText("yaHoo")
									});
									


You need to provide the text without any change in the case of the text

selectByAttribute

In other selenium packages like selenium, protractor, they have provided a option like selectByValue which limits that we can use only value but In webbdriverIO these guys have provided a method called selectByAttribute, this method accept any attribute and selects teh dropdown option based on the attribute value.

Syntax:


									$(selector of dropdown).selectByAttribute(attribute, value)
									


Code for selecting dropdown option based on attribute


									it('Select dropdown with WebdriverIO', () => {
										browser.url('https://chercher.tech/practice/dropdowns')
										$("select#first").selectByAttribute("value", "Apple")
									});
									


About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions