Responsiveness Testing with Selenium WebDriver

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

Zhimin Zhan

--

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

--

--

Zhimin Zhan

Test automation & CT coach, author, speaker and award-winning software developer. Help teams succeed with Agile/DevOps by implementing real Continuous Testing.