How to Get Text from a WebElement with WebDriver.io JavaScript

One common task in test automation is extracting the text content of a particular element on a page. In this article, we will explore how to extract text from a WebElement with WebDriver.io in JavaScript.

Using getText()

The most straightforward way to extract text from a WebElement is by using the getText() method provided by the WebElement class in WebDriver.io. This method returns the text content of the element as a string. Here is an example code snippet:

// Find the element by ID
const element = await browser.$('#js-link-box-en');

// Retrieve the text value of the element
const elementText = await element.getText();

This code first navigates to the Wikipedia main page, then locates a specific element on the page using an ID locator. The getText() method is then called on the WebElement to extract the text content of the element. Finally, an assertion is made to ensure that the extracted text matches the expected value.

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

See Working Example

Using getText() is a simple and effective way to extract text from a WebElement in WebDriver.io. However, it is important to note that this method only returns the visible text content of the element. If there are other non-visible text contents, such as text contained in child elements, they will not be included in the extracted text.