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 virtual machine
The easiest way to set everything up is to use MediaWiki-Vagrant. Follow the instructions in Quick start section. If you decide to use it, skip to Run a test section, you do not have to install or configure anything on your machine.

Browser

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

User

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

Code
Get the code. In config 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.
 * Edit line 1 of browsertests/config/config.yml, change  to
 * Create a file secret.yml in the same directory browsertests/config/secret.yml. Edit secret.yml to show
 * Replace  and   with your user name and password, of course.

Ruby
To check if you have Ruby installed, open Terminal (Mac, Linux) or Command Prompt (Windows) application and type ruby -v.

Example: Ruby not installed on Windows.

ruby -v

'ruby' is not recognized as an internal or external command, operable program or batch file.

Example: Ruby installed on Linux.

ruby -v

ruby 2.0.0p195 (2013-05-14 revision 40734) [x86_64-linux]

Ruby on Windows
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 Linux or Mac
$ cd qa-browsertests $ gem update --system $ gem install bundler $ bundle install
 * use RVM
 * for *nix systems use RVM $ \curl -L https://get.rvm.io | bash -s stable
 * for Windows use http://rubyinstaller.org/
 * then do:
 * In new terminals you may need to do  to use RVM properly

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

 * https://lists.wikimedia.org/mailman/listinfo/qa