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

The 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 selectable elements in the 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 which option we want to select. Here the option will be given based on their position in the dropdown.

The 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 the dropdown will not be effective because Index will change when the developer inserts a new option before the target option

selectByVisibleText in WebdriverIO

electByVisibleText() 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 a dropdown option

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


I have changed the text case 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 an option like selectByValue which limits that we can use only value but In webbdriverIO, these guys have provided a method called selectByAttribute, this method accepts any attribute and selects the 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")
});
0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions