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.
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.
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:
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:
Besides, Selenium also provide an API that contain all above properties.
Rectangle rect = element.getRect(); Point p = rect.getPoint(); Dimension d = rect.getDimension();
Rectangle rect = element.getRect(); int px = rect.getX(); int py = rect.getY(); int h = rect.getHeight(); int w = rect.getWidth();
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.
Selenium javadoc: https://selenium.dev/selenium/docs/api/java/