Clicking on Web Elements with Webdriver.io and Javascript

Clicking on Web Elements is an essential part of web automation testing. It allows testers to simulate user interactions and verify that web applications are working as expected. In this article, we will explore how to click on web elements using Webdriver.io and JavaScript.

Using the click method

The most straightforward way to click on a web element using Webdriver.io is by using the click method. This method can be used on any element that is clickable, such as a button, link, or checkbox. To use this method, first locate the element using its ID or XPath, then call the click method on it.

// Locate the element by ID
const element = await browser.$("//a[@*='js-link-box-en']");
// Click on the element
await element.click();

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

See Working Example

The click method will simulate a left-click on the element. If the element is a link, it will navigate to the URL specified in the href attribute. If the element is a button or a checkbox, it will trigger the associated event.

If the element is not visible or clickable, an error will be thrown. To avoid this, we can use the waitForClickable method to wait for the element to become clickable before attempting to click on it.

// Wait for the element to become clickable
await element.waitForClickable();
// Click on the element
await element.click();

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

See Working Example

Conclusion

Clicking on web elements is a fundamental aspect of web automation testing, and Webdriver.io provides an easy-to-use interface to accomplish this. By using the click method and the waitForClickable method, we can simulate user interactions and verify that web applications are working as expected.