Sometimes you need to test are the elements in place regarding to each other. Finding inner-child elements, to check do they overlap partially or totally each other.
Are they visible and dimensions regarding the display and so forth. It depends on what do you need, there are wide varieties for testing, from which I will cover the most used cases.
Is this quick tutorial I will cover three basic tests :
- Is one element inside the other
- Do elements have overlap of borders
- Are two elements apart from each others (outside one another with no overlap of borders)
Let see some code, I shall use Java program language with Selenium 2 Webdriver and testNG for unit testing.
//class containing functions to check intercourse of two WebElement types
public class ElementLocation{
//Function that checks is one element inside of other
public static void isInner(WebElement firstElement, WebElement secondElement) {
// get borders of firstElement element
Point firstLocation = firstElement.getLocation();
Dimension firstDimension = firstElement.getSize();
int firstLeft = firstLocation.getX();
int firstTop = firstLocation.getY();
int firstRight = firstLeft + firstDimension.getWidth();
int firstBottom = firstTop + firstDimension.getHeight();
// get borders of second element
Point secondLocation = second.getLocation();
Dimension secondDimension = second.getSize();
int secondLeft = secondLocation.getX();
int secondTop = secondLocation.getY();
int secondRight = secondLeft + secondDimension.getWidth();
int secondBottom = secondTop + secondDimension.getHeight();
//if the firstElement is inside of secondElement return true
final boolean isInside = (firstLeft < secondLeft)
&& (secondRight < firstRight)
&& (firstTop < secondTop)
&& (secondBottom < firstBottom);
final String errorMessage = "The elements are either outside of each others or have overlap of border sides";
assertTrue(isInside, errorMessage );
}
//Function that checks does one or more borders of element overlap with borders of the other
public static void hasOverlap(WebElement firstElement, WebElement secondElement) {
// get borders of firstElement element
Point firstLocation = firstElement.getLocation();
Dimension firstDimension = firstElement.getSize();
int firstLeft = firstLocation.getX();
int firstTop = firstLocation.getY();
int firstRight = firstLeft + firstDimension.getWidth();
int firstBottom = firstTop + firstDimension.getHeight();
// get borders of second element
Point secondLocation = second.getLocation();
Dimension secondDimension = second.getSize();
int secondLeft = secondLocation.getX();
int secondTop = secondLocation.getY();
int secondRight = secondLeft + secondDimension.getWidth();
int secondBottom = secondTop + secondDimension.getHeight();
//if the firstElement borders overlap some side of secondElement borders return true
final boolean overlapedSide = (firstLeft == secondLeft)
|| (secondRight == firstRight)
|| (firstTop == secondTop)
|| (secondBottom == firstBottom);
final String errorMessage = "The elements have overlap of one or more borders";
assertTrue(overlapedSide, errorMessage );
}
//Function that checks is one element outside of other one
public static void isOuter(WebElement firstElement, WebElement secondElement) {
// get borders of firstElement element
Point firstLocation = firstElement.getLocation();
Dimension firstDimension = firstElement.getSize();
int firstLeft = firstLocation.getX();
int firstTop = firstLocation.getY();
int firstRight = firstLeft + firstDimension.getWidth();
int firstBottom = firstTop + firstDimension.getHeight();
// get borders of second element
Point secondLocation = second.getLocation();
Dimension secondDimension = second.getSize();
int secondLeft = secondLocation.getX();
int secondTop = secondLocation.getY();
int secondRight = secondLeft + secondDimension.getWidth();
int secondBottom = secondTop + secondDimension.getHeight();
//if firstElement is not inside of secondElement nor they have overlap of border sides return true
final boolean isInside = (firstLeft < secondLeft)
&& (secondRight < firstRight)
&& (firstTop < secondTop)
&& (secondBottom < firstBottom);
final boolean overlapedSide = (firstLeft == secondLeft)
|| (secondRight == firstRight)
|| (firstTop == secondTop)
|| (secondBottom == firstBottom);
final boolean notIntersected = !isInside && !overlapedSide;
final String errorMessage = "The elements either have overlap of one or more borders or one is inside of the other";
assertTrue(notIntersected, errorMessage );
}
}
Similar Posts from the author:
- Behat Mink default commands in Gherkin
- Navigating between browser windows with WD
- Webdriver using javascript expressions in Browser Console
- Behat test examples – BDD and PHP
6 thoughts to “Java Selenium Element Locations”
Hi Arnold Ger
Nice website, thanks for your hardwork.
I have similar scenario where I have to verify the object (chat window, separate pop up window type) is displayed at the bottom right hand corner of the browser
I know how to get point x, y, height and weight, but I don’t know how to use this info to verify it is displayed at bottom right hand corner of the browser. Also, how to handle if tested in different workstation with different screen resolution?
Thank you.
Hi Arnold Ger
Nice website, thanks for your hardwork.
I have similar scenario where I have to verify the object (chat window, separate pop up window type) is displayed at the bottom right hand corner of the browser
I know how to get point x, y, height and weight, but I don’t know how to use this info to verify it is displayed at bottom right hand corner of the browser. Also, how to handle if tested in different workstation with different screen resolution?
Thank you.
Hi Christo,
Apologies for the late reply,
Well for that you will need a bit of math to integrate into code. The basic idea will be this:
Acquire the browsers visible size, cut it in four squares with height/2 and width/2 so you get top-tight, top-left, bottom-right, bottom-left sectors… Ant then you get the location + size or your desired.
1) If the element coordinate and size fall into bottom-right sector you got the desired location. Adding to that you can go further by splitting the desired sector on the above mentioned way for further checks or you can do some math to see where the element is, closer to to center of page or closer to to right and bottom.
2) With above blog code you can check does your element has overlap sides with main page, in your case bottom and right side, with a minor modifications you can achieve this.
I leave you to decide which approach will you choose. Also I’m pretty sure there are a lot of other approaches.
Hi Christo,
Apologies for the late reply,
Well for that you will need a bit of math to integrate into code. The basic idea will be this:
Acquire the browsers visible size, cut it in four squares with height/2 and width/2 so you get top-tight, top-left, bottom-right, bottom-left sectors… Ant then you get the location + size or your desired.
1) If the element coordinate and size fall into bottom-right sector you got the desired location. Adding to that you can go further by splitting the desired sector on the above mentioned way for further checks or you can do some math to see where the element is, closer to to center of page or closer to to right and bottom.
2) With above blog code you can check does your element has overlap sides with main page, in your case bottom and right side, with a minor modifications you can achieve this.
I leave you to decide which approach will you choose. Also I’m pretty sure there are a lot of other approaches.
nice..
!selenium-webdriver/c3dh
nice..
!selenium-webdriver/c3dh
Comments are closed.