Is there a way to test responsive CSS with Selenium?

Question

The developers at my company have implemented our website to be CSS responsive, and I am confused how to leverage Selenium to test their work. I have been using Selenium WebDriver (Selenium 2) with Ruby all along for other aspects.

After doing some research online, I came across multiple tools but none worth automating with as they .. aaa... are just web tools to manually check with different screen sizes.

Some examples -

1. Device Testing for Resonsive CSS Layouts (Manual)
2. Responsinator
3. Responsive.is
4. Responsivepx (much better as more control)

But I can achieve the above very easily using Selenium as well using sel2/ruby

@driver.manage.window.resize_to(480, 725) #iphone potrait

---

Need help with

• How to actually test if the css is "responsive" automatically?
• What are commonly used attributes/aspects to check if page is responding to window resizing?
• Has anyone used Selenium to QA responsive CSS?

Answer 1

There is now a solution for automated testing of responsive design - Galen Framework. I have been working on a tool that would allow to test the responsive design of web page as well as just layout of website for cross-browser compatibility. The tool is available here http://galenframework.com

It uses Selenium in order to open a web page in a browser, re-size the browser window to a needed size and then to get the location of elements on page. It has a special syntax for describing the page look on different devices (browser sizes)

Here is a small example of testing basic web page skeleton:

# Objects definition
=====================================
header                  id  header
menu                    css #menu
content                 id  content
side-panel              id  side-panel
footer                  id  footer
=====================================


@ all
-------------------------------
header
    inside: screen 0px top left right

menu
    centered horizontally inside: screen
    below: header 0px

content
    below: menu 0px
    inside:screen 0px left

@ desktop
--------------------------------
side-panel
    below: menu 0px
    inside: screen 0px right
    width: 300px
    near: content 0px right
    aligned horizontally top: content

@ mobile
--------------------------------
content, side-panel
    width: 100% of screen/width


side-panel
    below: content 0px

Later you can run tests either in a single command or you can also create a separate test suite where you have more actions to perform (e.g. inject custom javascript, or do something with WebDriver etc.). To run the above example with single command you do it like this:

galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports"

That was only the basics. There are more examples on official website.

Also there is an introduction article which explains how to use TDD approach (Test Driven Development) when designing a web page http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/

Answer 2

I can think of two ways of doing this.

One - for each web element you can check its size, location, visibility, etc. After each resize you could compare those parameters with some previously specified values to check if layout has changed.

Second - image comparison. After each resize you could take a screenshot of the page and compare it to previously saved pattern. There are various image comparison libraries to achieve that. In our company we use ImageMagick. The image comparison however is not suitable for pages under development nor for the ones with changing content. You may get around this problem by hiding the parts of page that are prone to changes with javascript (this is doable with WebDriver).

I must admit I never had opportunity to test responsive pages neither manually nor automatically, so the above are just my ideas. I do use image comparison for testing "normal" pages, I am not sure if it will be suitable for responsive pages too.

EDIT

Unfortunately I don't know Ruby. Below is an example in Java I hope you can understand it and translate to Ruby somehow. The code simply prints the size and location of every element from the list.

org.openqa.selenium.Point point;
org.openqa.selenium.Dimension dimension;
        
List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath"));
        
for (WebElement element : elementsList)
{
    point = element.getLocation();
    dimension = element.getSize();
    System.out.println("Element name: " + element.getTagName());
    System.out.println("Element size: " + dimension.height + "x" + dimension.width);
    System.out.println("Element location: " + point.x + ":" + point.y);
}

Note that every invocation of getLocation() and getSize() causes js to be executed (in order to obtain the values) and it costs time. That's why you should make just one call per element, don't use something like element.getSize().height + "x" + element.getSize().width - it would take twice as much time comparing to the example above.

In Ruby the above-mentioned methods are called element.location and element.size