Is there a way to test responsive CSS with Selenium?

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  headermenu                    css #menucontent                 id  contentside-panel              id  side-panelfooter                  id  footer=====================================@ all-------------------------------header    inside: screen 0px top left rightmenu    centered horizontally inside: screen    below: header 0pxcontent    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/widthside-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/

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

If your main aim is to test changes in UI and selenium is not an absolute requirement you could use BBC Wraith - https://github.com/BBC-News/wraith very easy to setup and use.