How to Select a Drop-Down Menu Value in WebDriver IO with JavaScript?

Interacting with web page elements is a fundamental part of end-to-end testing, and this includes handling drop-down menus. Drop-down menus are a common feature in many web pages, allowing users to choose from multiple options. This article will cover how to select a value from a drop-down menu using WebDriver IO with JavaScript, focusing on one approach that leverages WebDriver IO's 'selectByVisibleText' method.

Selecting a Drop-Down Menu Value Using Its XPath

This approach is straightforward and easy to understand. It involves finding the drop-down menu element, and then using the 'selectByVisibleText' method to select the desired option.

// Use the span text instead of anchor title
const dropdown = await browser.$("//option[@lang='es']")
await dropdown.click()

Here is an example test that uses the above code snippet.

See Working Example