Test Automation - Validate text rendering

Question

We are doing test automation mainly using Selenium and Java for web applications and have a question regarding how to validate the rendering or texts. Is there a way we can find out if a text is truncated or is displayed outside the container (div, button, span etc) using any automation tool? Sometimes we observe labels won’t fit in their container when we localize the content as the size of the characters vary based on languages.

Answer 1

I would recommend the following:

look into http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/Dimension.html library; algorithm for text analysis I suggest the following:

1) you're selecting borders of a webpage and initializing borders of a page as webElements;

Stirng cssBorder="abracadabra";
WebElement border=driver.findElement(By.cssSelector(cssBorder));

2) then you're finding all the webElements representing the text like:

   String cssText1="...";
   String cssText2="....";
......
   WebElement text1=driver.findElement(By.cssSelector(cssText1));
   WebElement text2=driver.findElement(By.cssSelector(cssText2));

3) after steps above apply getSize(); getLocation(); functions to webElements found:

text1.getSize();
text1.getLocation();

And upon the results which these functions will return on that: e.g.:

{'y': 202, 'x': 165}
{'width': 77, 'height': 22}

you will be able to compare results returned and analyze relative position of webElements;

here is also hint for your question: Selenium: get coordinates or dimensions of element with Python

Hope this helps you.