Locating Elements with WebDriver IO (JavaScript)

Locating elements on a web page is an essential task when writing automated tests for web applications. WebDriver IO, a popular JavaScript-based testing framework, provides various ways to locate elements on a web page. In this article, we will discuss the most efficient method to locate elements using WebDriver IO with JavaScript, specifically using ID and XPath locators. This approach is commonly used when you need to interact with specific elements on a web page for testing purposes.

Finding Elements using the '$' Selector

WebDriver IO offers a convenient and straightforward way to locate elements on a web page using the '$' selector. This selector method can be used with both ID and XPath locators, making it versatile for different situations. The following code snippet demonstrates how to use the '$' selector method to locate elements by ID and XPath on the Wikipedia Main Page.

await browser.$('#searchInput').setValue("Hello World")
await browser.$('//button[i[contains(@class,"search")]]').click();

In the code snippet, we use the '$' selector method to locate the search box element by its ID, 'searchInput', and the search button element by its XPath, '//button[i[contains(@class,"search")]]'.

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

See Working Example