9

I am writing automated test cases for a company. One interesting problem is that texts on a webpage overlap each other, is there anyway to validate against this?

enter image description here

4

I think you are trying to detect if elements are overlapping. You will need some way in the clientside to tell you if two elements are colliding. I would try jQuery collision for this or some custom JavaScript code.

  • Add or inject jQuery and jQuery collision to the web-app under test
  • Use the Selenium javascriptExecutor to fire a collision detection on two elements
  • Check if there is a collision in the return value
5

If this overlapped texts belongs to single element, lets say label, or text field. You can locate that element and use "webElement.Text.Contains("the text you want to validate");" method to validate your expected text.

And if the overlapped texts belongs to different element, you can simply locate that specific element and validate the text of that element.

Hope, it will help. Thanks

2

What I am thinking is as following:

driver = webdriver.Firefox()
e = driver.find_element_by_xpath("//someXpath")
location = e.location
size = e.size
print(location)
print(size)

If I can get the size and location for an element, given an element is symmetrical, I can calculate its boarders as well. As long as one element's boarder does not cross into others', I will say they are not overlapping.

1
public boolean areElementsOverlapping(WebElement element1, WebElement element2) {
    Rectangle r1 = element1.getRect();
    Point topRight1 = r1.getPoint().moveBy(r1.getWidth(), 0);
    Point bottomLeft1 = r1.getPoint().moveBy(0, r1.getHeight());

    Rectangle r2 = element2.getRect();
    Point topRight2 = r2.getPoint().moveBy(r2.getWidth(), 0);
    Point bottomLeft2 = r2.getPoint().moveBy(0, r2.getHeight());

    if (topRight1.getY() > bottomLeft2.getY()
            || bottomLeft1.getY() < topRight2.getY()) {
        return false;
    }
    if (topRight1.getX() < bottomLeft2.getX()
            || bottomLeft1.getX() > topRight2.getX()) {
        return false;
    }
    return true;
}

Every element have rectangular dimensions, so here we are checking whether 2 rectangles are overlapping with each other or not with respect to screen co-ordinates system. For more context please read getRect, getSize and getLocation methods of WebElement.

PS: This is JAVA specific answer, but I hope you will make it work as per your programming language

  • 2
    Please add the description of your solution. – Nitin Rastogi Jun 13 at 10:18
  • updated @NitinRastogi – Nipun Saini Aug 2 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.