Jan 7, 2014

Layout testing for responsive websites with Selenium. Doing it properly

Automated layout testing for website was always a question if it is at all possible. When Selenium rose in its popularity a lot of people tried to approach it for layout testing but more and more were stating that Selenium is not the right tool for it. Well, I still think it is the best tool ever for layout testing. And thats what I tried to prove with Galen Framework. In my mind the best way to test layout is by checking each individual element on page relatively to another elements. Selenium WebDriver offers functionality for getting location and dimension of element and it is doing this quite good in all browsers. Galen Framework allows you to express you expectations towards website layout and then uses Selenium to retrieve information about page elements. Lets see how to get the best coverage for layout testing.

When doing layout testing you don’t need to verify the exact absolute location of each particular element on page. You should do it rather relatively. For instance lets say you have a website with horizontal menu under the header. What could we test in this case? And what is more important how could we cover whole layout so we don’t miss any bugs. Lets take a look at this scheme.

Example 1. Testing layout for header and menu that have a static width

To provide complete testing of layout we can’t just check that the header is above menu. To do it properly we need something like this:

=============================== header css #header menu css #menu =============================== header inside: screen 0px top width: 900px height: 100px centered horizontally inside: screen menu below: header 0px width: 900px height: 50px centered horizontally inside: screen

That way we make sure each element is in the right place. But we can optimize it a bit. In the example above we check menu width and also that it is centered horizontally. But what we can do is just check that its edges align with the header. This way we will cover both the width and location of header.

=============================== header css #header menu css #menu =============================== header inside: screen 0px top width: 900px height: 100px centered horizontally inside: screen menu below: header 0px height: 50px aligned vertically all: header

Example 2. Testing layout for header and menu that stretch to browser width

Now lets take a look at another example where the header and menu are stretched to complete width of browser.

What we should check here is that the width of header is same as the width of browser, that header is located on top and is above menu.

=============================== header css #header menu css #menu =============================== header inside: screen 0px top width: 100% of screen/width height: 100px menu below: header 0px height: 50px width: 100% of screen/width

But here we also could optimize our checks a bit. There is no sense to check location and width of header separately as we can do it in one line like this:

=============================== header css #header menu css #menu =============================== header inside: screen 0px top left right height: 100px menu below: header 0px height: 50px width: 100% of screen/width

As you can see we just declared that the margin between header and screen for top, left and right edges should be 0px. This way we implicitly check that the width of header is stretched to browser width.

Recap

When you work with Galen Framework you don’t have to test each element on page with dozens of specs. And what is more important you don’t have to give absolute coordinates in your tests. Layout testing with Galen Framework has a special mindset which differs from regular regression tests. Just bind your page elements checks to each other and your tests will be safe.

Posted in Galen, Automation, Selenium, Web
comments powered by Disqus