Quality Assurance/Meetings/2013-07-18

Cucumber and Page Objects: Writing Great Browser Tests

 * See also Browser Automation Workshops.

This session will take you through every step of writing an automated test for WikiLove, a real feature on Wikipedia, from the requirements to the executable code.

We'll start by crafting a plain English description of a software feature in the form of Given/When/Then statements for Cucumber.

Then we will turn that plain English description of the software feature into an executable test using the Page Object design pattern.

There will be kittens.

Programming knowledge is not required, although programming experience is helpful when we turn to implementing our Cucumber scenarios.

Agenda:


 * Discussion: create some Cucumber test scenarios for a particular Wikipedia feature.
 * Setup: install Ruby and prerequisites for Cucumber/Page Object tests.
 * Tech demo: Cucumber makes it easy to write the test steps.
 * Tech demo: create the Page Object for the test.
 * Finish: watch the tests run on your local machine, and check the test into the real Wikipedia repository

Setup
Please setup either a virtual machine or your computer before the workshop. There will be no time for setup during the workshop.

User
Create a user on the test server (if you don't already have one).

Git
Git is optional, but recommended. You do not need it to participate in the workshop. There is no need to create GitHub account, but feel free to do so.

On Mac install GitHub for Mac. Run the Github app and at Configure Git step of the startup wizard click Install Command Line Tools button.

Setup virtual machine
Tested on OS X 10.8.4.

The easiest way to set everything up is to use MediaWiki-Vagrant virtual machine.

If you have Git installed, follow the instructions in Quick start section. If you do not have Git installed (instead of  step) get the code from wikimedia/mediawiki-vagrant Github repository, just click Download ZIP button.

In addition to the instructions there, on OS X you will need to install the latest version of XQuartz. After running, in   change

to

and run. Acces the virual machine with. The code will be located at.

If you decide to use Vagrant, you do not have to read Setup your computer section. Skip to Run a test section, you do not have to install or configure anything on your machine.

Example of setting up vagrant in Terminal:

$ git clone https://gerrit.wikimedia.org/r/mediawiki/vagrant $ cd vagrant $ vagrant up (make the change in Roles.yaml) $ vagrant provision $ vagrant ssh -- -X $ cd /srv/browsertests

Browser
Install Firefox (if you do not already have it installed).

Ruby on Windows
Tested on Windows 7 Enterprise, Service Pack 1, 32-bit.

Download Ruby 1.9.3-p429 and DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe from RubyInstaller.

Install Ruby. You can leave all settings at default values, except at the Installation Destination and Optional Tasks screen check Add Ruby executables to your PATH checkbox.

Extract DevKit to C:\devkit and set it up.

C:\>cd devkit

C:\devkit>ruby dk.rb init [INFO] found RubyInstaller v1.9.3 at C:/Ruby193

Initialization complete! Please review and modify the auto-generated 'config.yml' file to ensure it contains the root directories to all of the installed Rubies you want enhanced by the DevKit.

C:\devkit>ruby dk.rb install [INFO] Updating convenience notice gem override for 'C:/Ruby193' [INFO] Installing 'C:/Ruby193/lib/ruby/site_ruby/devkit.rb'

Ruby on Mac
Tested on OS X 10.8.4.

Mac machines come with Ruby installed, but unfortunately, it is an old version (1.8.7). To run the tests you will need a more recent version of Ruby (1.9.3 or 2.0).

Download and install Command Line Tools (OS X Mountain Lion) for Xcode - April 2013 from developer.apple.com.

Install Ruby Version Manager (RVM) by running this in Terminal.

$ \curl -L https://get.rvm.io | bash -s stable Open a new Terminal window or tab and install Ruby: $ rvm install ruby-2.0.0-p247

Ruby on Linux
Tested on Ubuntu 13.04 32-bit.

Coming soon! :)

Code
Get the code in one of the following ways: In  directory:
 * If you do not have Git installed: click Download ZIP  from wikimedia/qa-browsertests Github repository.
 * If you have Git installed: clone wikimedia/qa-browsertests Github repository.
 * If you have Gerrit account: clone qa/browsertests Gerrit repository.
 * In  file, change   in   to your user name.
 * Create  file. Add your password to the file, something like

Install required Ruby software
Open Terminal (Mac, Linux) or Command Prompt (Windows) application and type this. is the name of the folder where the code is located.

$ cd browsertests $ gem update --system $ gem install bundler $ bundle install

Run a test
If everything is set up properly, from a command line in the /browsertests directory, do

$ bundle exec cucumber features/wikilove.feature

and watch our test run in Firefox on your computer. Kittens!

Hack

 * As a group, improve the existing Cucumber scenarios
 * As a group, make a new Cucumber Scenario
 * Make the new tests run!

Get Involved
Join our QA mailing list! Fix an easy bug!