Writing end to end tests for Sencha Touch apps using watir webdriver

Functional automated testing tools have come a long way since the days of winrunner, quick test pro, qa test etc. All these tools are very good at what they do but lately a bunch of open source test tools have gained tremendous popularity like selenium, watir, sahi, canoo webtest etc… But my favourite is the watir-webdriver. In this blog I’m going to demonstrate how easy it is to get started with automating sencha touch apps using watir-webdriver. Sencha being a javascript framework most developers would like to write tests in javascript using frameworks such as jasmine, siesta, cucumberjs etc .. but I wanted to just highlight how easy it is for testers with ruby knowledge to get started with test automation.

First let us get the environment setup. Watir-webdriver is a ruby gem so we will need ruby installed. Mac OS is already bundled with Ruby and we could possibly use it but we need to install gems using sudo command, so I suggest we use RVM which is great at managing different versions of ruby and gem sets..

Prerequisites:

• Mac OS X
• Xcode
• Google Chrome or Firefox
• Homebrew or NPM (Optional to install chromedriver)

Steps:
Install RVM
\curl -sSL https://get.rvm.io | bash

Install Ruby 2.1.2 and make it the default ruby version

rvm install ruby-2.1.2
rvm use ruby-2.1.2 --default

Install Chromedriver using brew or npm

brew install chromedriver

or

npm install chromedriver -g

if you do not have brew or NPM installed then you will have to download the chromedriver from http://chromedriver.storage.googleapis.com/index.html and put the binary in your path

Create a folder named test inside your project folder and add file named Gemfile in the folder
Open the Gemfile in your editor and add the following

source 'http://rubygems.org'
ruby "2.1.2"
gem 'watir-webdriver'

Install the bundler Gem

gem install bundler --no-ri --no-rdoc

Now install all dependencies using bundler

cd test
bundle install

Let’s now write our first test against the demo Kiva app
http://dev.sencha.com/deploy/touch/examples/production/kiva/

Test case ….

1. Open a Chrome browser
2. Navigate to the Kiva app
3. Verify the title of the page
4. Wait for the dataview to load
5. Search for a string in the search field
6. Verify that the results match

Create a new file named mytest.rb and open it in an editor and add the following code

run the test by executing …

ruby mytest.rb

The key here is to make sure that you wait for the objects you interact with to load by using wait_until_present or wait_while_present methods otherwise the tests will fail because webdriver can’t find the objects on the page. This is one of the major difference I see between writing test against regular web applications and single page applications

This was a very basic test just to get set up, in the next blog I will be writing about how we could integrate watir-webdriver with cucumber.