Automating browser testing

Mal Curtis

Browser Testing?

Testing for differences in behaviour, and user interface, between browser brands and versions.

We accidentally created a monster

Client Side Web Apps

  • Back end moving to 'just an api'
  • Front end frameworks make it easier
  • It's just so fast!
  • But it's in the browser
  • Not 'the' browser, but 'a' browser

Testing is mainstream

Unit / Integration / Acceptance

  • Proven Track record
  • Unit tests are great for 'business' logic
  • Acceptance tests great for 'request / response'
  • Not many people cross browser testing


"I thought we'd fixed all these browser inconsistencies years ago?"

No: We fixed the old ones, and created new ones

  • postMessage cross window communication
  • Cross Origin Resource Sharing
  • 3rd Party Cookies
  • Async script loading
  • Web Fonts |Sockets |Workers |Notifications
  • Browser DB Formats

Cross browser testing

 is more important 


 than ever

It's just not as obvious as a broken layout.


  • Start Browser
  • Visit Page
  • Follow process / interaction
  • Fail / Success
  • Fix bug and repeat (if failed)
  • Open next browser, start again

That's Shit.

And no fun.

Cross Browser testing Can be automated

  • Selenium: Browser Automation
  • Not new, but under-utilised
  • Possibly because of ugly logo
"Provides an interface with which to remote control a browser"

  • 'WebDrivers' for every browser
  • Client libraries for most languages
  • Written in Java

Demo 1

Google search

The 'hello world' of selenium

Abstraction Libraries

A lot of languages have them

  • Ruby: Capybara
  • Python: Splinter
  • Node: Soda
  • PHP: Sausage (kinda)
  • .net: Could not find?

Simplifies the API

            driver.get ""
            element = driver.find_element name: "q"
element.send_keys "how do i"
            element = driver.find_element text: "Click me"
    visit ""
    fill_in "q", with: "how do i" 
    click_link "Click me"

Demo 2



  • Good testing libraries have integration
  • Easy enough to do your own though

                visit '/sessions/new'
    within("#session") do
      fill_in 'Login', :with => ''
      fill_in 'Password', :with => 'password'
    click_link 'Sign in'
    page.should have_content 'Success'

The Grid


Selenium Grid 2


"A single interface for all of the things" 

  • Central Hub with many nodes
  • Each node has their
     own capabilities (e.g. browsers)
  • Hub routes requests for browsers to nodes
  • Easy to scale
  • Easy to add new browsers

Demo 3

The Grid

How do I actually use this?

Web Apps with enhanced functionality

  • Small javascript enhancements
  • Run normal acceptance tests,
    checking javascript runs correctly
  • Check user interface
  • Check responsive interface


  • Benefit is far more obvious
  • Test interactions & processes with
    real browsers
  • Ensure core functionality isn't broken
  • You have no alternative

Do whatever feels right

  • Payments sometimes failing? Test them
  • Users complaining modals offscreen? Test them
  • Design regressions? Screenshot them

Demo 4



Mal Curtis