Testing Page Layout with webdriver

Question

Has anyone tried to test the page layout of a website using webdriver? To be specific, using webelement.getPosition() and webelement.getDimension().

Shouldn't these two methods be enough for testing the layout of the page. I did a quick test and found that the location would return the location of the element relative to the left top corner of the page. That means this should always return the same value irrespective of monitor resolution or window size.

If I can record the location and element dimension once and store those values somewhere, I can run automated tests using selenium to find whether the position or dimension of the element changed. If that change is greater than a delta value which I set, then it means the alignment of the element has changed and I can fail the test.

I am planning to create some utility program which does this, but wanted to confirm that this would indeed be enough to test the page layout

Answer 1

As an alternative to simply making sure the values match completely every time, you may be able to create a little more reliable automation by checking things like certain elements don't intersect or element A is always above element B, etc. This would require creating some additional functions to test these things. This will give you some automated validation of layout without being so fragile and working cross browser, however I still don't think it will replace a visual validation of the page.

Answer 2

I wouldn't recommend this method. First of all it's rather slow. Have you tried invoking the methods you've mentioned for every element on the page? In browsers like Chrome or FF it takes about 6-10 seconds for 190 elements (actually I checked it today). Moreover it can take more than 1 minute on IE!

Another thing would be managing these stored values. If you want to manually define every element for which you will be checking these values - it will be to much work plus it will be quite vulnerable to any changes made to the page. Therefore I assume you obtain and save values for all elements automatically. However I am not sure if the findElements function returns elements always in the same order. You will need to check that.

I would rather recommend taking screenshots with web driver. You can take a screenshot and save it as a reference pattern. Then during the next test you take another screenshot and compare it with the saved pattern. In our company we use ImageMagick and we're happy with it. It's open source solution. We simply run executable file (compare.exe, included in the package) from our java program. There are other libraries too. It does not eliminate the problems I mentioned above (still it's very vulnerable to any changes) but it's easier to implement and provides more coverage.

But getting back to your question if the approach you described is enough for layout testing. Basically yes, if:

• you don't care about images, font family, font colour, etc.
• you can ensure the same browser size every time you test (but that's easy)
• there aren't any elements on page that are placed/resized/moved using javascript

Answer 3

In general page layout and browser compatibility are best tested through manual tests.
Selenium is designed to test the functionality of your website. Your suggestion of using the webelement.getPosition() and webelement.getDimension() methods to test layouts is unlikely to work because in most HTML pages simply resizing the web page will move most elements on the page.

Instead I would suggest visually inspecting each page of your site before each release. If you have to support multiple web browsers this involves doing manual testing in multiple web browsers.

Answer 4

If this is for Java [and Selenium 2] then why not use Fighting Layout Bugs project?

Add the dependency and you can create a test like this:

FirefoxDriver driver = new FirefoxDriver();
try {
    String testPageUrl = "http://www.test.de/";
    driver.get(testPageUrl);
    WebPage webPage = new WebPage(driver);
    FightingLayoutBugs flb = new FightingLayoutBugs();
    final Collection<LayoutBug> layoutBugs = flb.findLayoutBugsIn(webPage); 
    System.out.println("Found " + layoutBugs.size() + " layout bug(s).");
    for (LayoutBug bug : layoutBugs) { System.out.println(bug); }
}
catch (Exception e) {
    e.printStackTrace();
}
finally {
    driver.quit();
}

Answer 5

check this tool

TestComplete http://smartbear.com/products/qa-tools/automated-testing-tools

it saves screensshots during test execution

watch Web Testing Video 5:27 to see how it works

maybe selecting another tool will be the best option

there are more videos with tutorials available