How to validate against texts overlapping each other using selenium?

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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