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

5 Answers 5


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.

  • Yes. I agree it won't be a replacement of visual validation. But still it will be good to have something like this if there are many pages in a website.
    – A.J
    May 17, 2012 at 19:52

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
  • The application that am working on has a lot of dynamic content. So screenshot comparison is not going to work. I am right now worried only about whether the placeholders of the images are always shown in the correct place. What's inside that - Its tough to test for now. Mainly coz I donno the expected result.
    – A.J
    May 16, 2012 at 20:42
  • If changing content does not change positions of page elements and you are just checking whether images are in place then your method is perfectly OK.
    – JacekM
    May 16, 2012 at 22:51
  • @ JacekM: I am looking to do something as you just mentioned abouve using ImageMagick. Also once you compare the screen shot , does compare.exe come up with the differences in the images and display it ??
    – user4495
    Dec 6, 2012 at 20:45

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.


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/";
    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) {
finally {

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

  • 4
    Hi Asia, welcome to sqa.stackexchange. This answer is not helpful as it is specifically about using webdriver. The question was not asking for a different tool that could solve the problem. May 22, 2012 at 2:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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