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.
From above image, there are some things that need to make clear:
- Coordinate:
Values on Ox axis are incremented from-left-to-right.
Values on Oy axis are incremented from-top-to-bottom. - 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/
tandt53 