Responsiveness Testing with Selenium WebDriver

How to use automated tests to test responsive websites in Selenium WebDriver

A repost of my daughter’s article, I added a few notes. You can find more Selenium examples like this one in my eBook: Selenium WebDriver Recipes in Ruby. This is also included in my “How to in Selenium WebDriver” series.

Most modern websites are responsive, which essentially means that depending on the window size, the appearance of the page changes. The most common example of this is a nav bar shrinking for mobile view.

This presents a challenge for End-To-End UI tests, as you will need to test responsive views too. This article will walk through how to write a test for a responsive website.

Test Design

I’ll use WhenWise as the sample app in the tutorial and try to access the sidebar. In the responsive view, the sidebar is replaced by the hamburger icon on the top-left.

I’ll just do a simple test to navigate to one of the sidebar links, “Reviews”.

1. Set browser size to desktop
2. Click Reviews
3. Change browser size to mobile
4. Ensure Reviews cannot be clicked directly; instead, open the Hamburger menu, then click Reviews.

Clearly, the key is how to resize the browser window. Luckily, this is very easy in Selenium.

Resizing browser window

In Selenium, you can set the browser dimensions with driver.manage.window.resize_to , example:

# set window to width of 1280px and height of 900px
driver.manage.window.resize_to(1280, 900)

Zhimin: There are some helper libraries providing browser dimensions for different devices, e.g. device(:iphone_8_plus) . Personally, I don’t use them. As the front-end framworks such as BootStrap and Materialize are very mature (used by most modern web sites), there is really no need to testing different screen resolutions excessively. Just focus on several typical…