Responsiveness Testing with Selenium WebDriver

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

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.

Bootstrap default NavBar on a large browser window

The same Bootstrap NavBar for mobile/thinner screens

This presents a challenge for End-To-End UI tests, as you will need to test responsive views too. This article will walkthrough 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 theHamburger 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 960px
driver.manage.window.resize_to(1280, 960)

I recommend setting this in the before(:all) step of your test file.

Desktop Version

Before we start with the responsive size, let’s create a baseline test for the regular desktop view. A standard window size is 1280px x 960px, so I set that first.

  it "Desktop view - access sidebar directly" do
    driver.manage.window.resize_to(1280, 960)
    sign_in("driving@biz.com")
    
    expect(page_text).to_not include("Rating")
    driver.find_element(:id, "menu-reviews").click
    expect(page_text).to include("Rating")
    sign_out
  end

The rest of the test is pretty standard, just clicking the “Reviews” nav icon and verifying we are on the Reviews page.

Responsive Version

For this test, resize the window to custom values instead.

driver.manage.window.resize_to(375, 667) # iphone8

I set the height and width to an iPhone 8 (a pretty standard phone size). Of course, you can set it to match a different phone’s dimensions or tablet size if you prefer.

Note that the body of the responsive test is different to the desktop one, because the website is different. Now we need to open the Hamburger menu first.

# open hamburger menu
driver.find_element(:xpath, "//a[@class='sidenav-trigger']").click 
driver.find_element(:id, "menu-reviews").click
expect(page_text).to include("Rating")

And that’s it! It’s quite simple to resize the browser window in Selenium to simulate responsive devices.

Complete Test Script

load File.dirname(__FILE__) + "/../test_helper.rb"

describe "Simple Responsive UI Test" do
  include TestHelper

  before(:all) do
    @driver = $driver = Selenium::WebDriver.for(browser_type, browser_options)
    @driver.navigate.to(site_url)
  end

  after(:all) do
    @driver.quit unless debugging?
  end

  it "Desktop view - access sidebar directly" do
    driver.manage.window.resize_to(1280, 960)
    sign_in("driving@biz.com")
    
    expect(page_text).to_not include("Rating")
    driver.find_element(:id, "menu-reviews").click
    expect(page_text).to include("Rating")
    sign_out
  end

  it "Mobile view - use hamburger menu to navigate" do
    driver.manage.window.resize_to(375, 667) # iphone8
    sign_in("driving@biz.com")
    
    expect(page_text).to_not include("Rating")
    driver.find_element(:xpath, "//a[@class='sidenav-trigger']").click # open hamburger
    driver.find_element(:id, "menu-reviews").click
    expect(page_text).to include("Rating")
  end
end