Mouse Over an Element in Webdriver IO with JavaScript

In web testing, it's often necessary to simulate user interactions like hovering over an element. WebDriverIO, a JavaScript testing utility, makes this possible. This article demonstrates how to mouse over an element using WebDriverIO.

Using the moveTo() Function in WebDriverIO

WebDriverIO provides the moveTo() function, which allows you to simulate the mouse over event. To use this function, you first need to identify the element you want to hover over. Here we'll use the Wikipedia main page as our test site.

// Define the element
const elem = await browser.$('//xpath/to/element');

// Perform mouse over
await elem.moveTo();

The code snippet above first defines the target element using an XPath locator. The moveTo() function is then used to perform the mouse over action on this element.

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

See Working Example

Being able to perform mouse over events can be crucial in testing various functionalities, such as dropdown menus, tooltips, or any UI elements that respond to hover actions.