Finding the center point of an element in Selenium

Sometimes you have to click or tap on a specific position of an element or an element’s container. This article will describe the way to find the center point of an element using Selenium.

Problem

Below is an image that contains 5 smaller images of stars. The image’s container can be found by locator type.
You need to click/tap on the star for rating 1-5.

Solution

To solve this problem, let see a smaller problem that finding the center point of an star element.

Center point (f) of a star element

From above image, there are some things that need to make clear:

  1. Coordinate:
    Values on Ox axis are incremented from-left-to-right.
    Values on Oy axis are incremented from-top-to-bottom.
  2. Star element is a rectangle (or square) with:
    Height and Width of the element are h & w corresponding.
    p(x, y) is the point at the TOP-LEFT position.
    f(x, y) is the center point of star element that need to find x-value and y-value.

If you know the parameter h & w of element and the TOP-LEFT point of element, then you can find the point we need.

Fortunately, Selenium provides the APIs to help us in this case.

Point p = element.getLocation();
Dimension d = element.getSize();
d.x = h;
d.y = w;

Now the point f(x, y) could be found and clicked as follows:

f.x = p.x + di.width / 2
f.y = p.y + di.height / 2
new TouchActions(driver).down(f.x, f.y).perform();

Now, turn to the initial problem that is more complicated with 5 stars.

We need to find the coordinates of f1, f2, f3, f4, f5.
We still have the point p and the width – W and height – H of stars container.

Since all star elements are similar, then we have

h = H;
w = W / 5;

Thus, now we have point p and the width & height of each star. From those, all center points of stars can be found as:

// Point f1
f1.x = p.x + w / 2
f2.y = p.y + h / 2

// Point f2
f2.x = p.x + w / 2 + w
f2.y = p.y + h / 2

// Point f3
f3.x = p.x + w / 2 + w * 2
f3.y = p.y + h / 2

// Point f4
f4.x = p.x + w / 2 + w * 3
f4.y = p.y + h / 2

// Point f5
f5.x = p.x + w / 2 + w * 4
f5.y = p.y + h / 2

Finally, the problem is solved and you can touch to the all stars.

The problem is solved based on location and size of element that is supported by 2 Selenium APIs:

element.getLocation();
element.getSize();

Besides, Selenium also provide an API that contain all above properties.

Rectangle rect = element.getRect();
Point p = rect.getPoint();
Dimension d = rect.getDimension();

Or

Rectangle rect = element.getRect();
int px = rect.getX();
int py = rect.getY();
int h = rect.getHeight();
int w = rect.getWidth();

Summary

The article presents the basic example of using Point and Dimension for finding the center position of an element. There are several methods of Selenium to support getting necessary properties of element.

Reference

Selenium javadoc: https://selenium.dev/selenium/docs/api/java/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.