Scrolling by a Specific Distance with WebDriver IO (JavaScript)

Scrolling by a specific distance on a webpage is a useful feature in automation testing when you need to interact with elements that may not be visible without scrolling. WebDriver IO, a popular JavaScript-based automation testing framework, allows you to easily perform this task. In this article, we will discuss how to scroll by a specific distance using WebDriver IO in JavaScript.

Using Execute Command to Scroll by a Specific Distance

The most relevant method to achieve scrolling by a specific distance in WebDriver IO is by using the execute command. This command enables you to run arbitrary JavaScript code in the browser, which means that you can use JavaScript's window.scrollTo() method to scroll by the desired distance. We will use the execute command in conjunction with window.scrollTo() to scroll by a specific distance on the example webpage: https://en.wikipedia.org/wiki/Main_Page.

const xDistance = 0;
const yDistance = 500;
await browser.execute((x, y) => {
    window.scrollTo(x, y);
}, xDistance, yDistance);

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

See Working Example