How to Click Elements with Offsets in WebdriverIO

About The Video

In Part 14 of the WebdriverIO series, join 𝐌𝐚𝐫𝐜𝐨 𝐀 𝐂𝐫𝐮𝐳, founder of AutomateNow, and learn how to use WebdriverIO to click elements with precision using X and Y offsets. In this tutorial, you'll understand how clicks work in WebdriverIO and how to control them based on element coordinates.

Video Chapters

00:00 Introduction

00:41 How Clicking Works

06:37 Click in the Middle of an Element

10:23 Click to the Right Using Offset

12:31 Click to the Left Using Offset

13:15 Get Element Width and Height

16:05 Click to the Right Using Width Percentage

18:43 Click to the Left Using Width Percentage

20:00 Conclusion

Key Topics Covered

WebdriverIO Click Basics:

Default click happens at the center of an element, not at the top-left corner.

Offset clicks allow you to specify a click location relative to the element’s center.

Understanding Offsets:

X-axis (horizontal) and Y-axis (vertical) offsets determine how far the click is from the center of the element.

Positive values move the click to the right (X-axis) or down (Y-axis).

Negative values move the click to the left (X-axis) or up (Y-axis).

Element Dimensions and Offsets:

You can calculate the distance to move from the center using the element’s width and height.

Example: If an element is 100 pixels wide, the center is at 50 pixels from each edge.

If you want to click 25 pixels to the right, you specify a positive value for X (e.g., 25).

Using Offset Clicks in Practice:

Demonstrates how to interact with a slider on a webpage by clicking at various points on the slider element.

Shows how to use the .getSize() method to retrieve an element’s width before performing the click operation.

Code Example for Offsets:

Code demonstrates how to use WebdriverIO to simulate clicking at different offsets based on specific calculations or element dimensions.

Emphasizes the importance of ensuring the click stays within the element’s boundaries.

Calculating Percentage Offsets:

Example of how to click 25% (e.g., 125 pixels) from the center of an element using percentage-based offset calculations.

Practical Use Cases:

Sometimes, you need to click precisely within an element, like on sliders or custom UI controls that require specific clicks to trigger events.

Visual Debugging:

Pauses are used to visually verify click actions and ensure accuracy in test automation.

Related Blogs & Hubs

How to Run WebdriverIO Tests: Getting Started Tutorial

Cross Browser Testing With WebdriverIO [Tutorial]