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

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