Take the 2-minute tour ×
Software Quality Assurance & Testing Stack Exchange is a question and answer site for software quality control experts, automation engineers, and software testers. It's 100% free, no registration required.

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

share|improve this question

5 Answers 5

up vote 3 down vote accepted

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.

share|improve this answer
    
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 '12 at 19:52

If this is for Java then why not use this project? https://code.google.com/p/fighting-layout-bugs/

share|improve this answer

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.

share|improve this answer

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

share|improve this answer
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. –  Bruce McLeod May 22 '12 at 2:19

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
share|improve this answer
    
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 '12 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 '12 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 '12 at 20:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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