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

July 9, 2014

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..


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

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


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

Screenshot 2014-07-08 13.29.51

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.

Bharath Khambadkone is a Sr. QA/DevOps Engineer at Modus Create who loves to automate and break systems by writing automated functional and performance tests. His favourite test frameworks/tools are cucumber, watir-webdriver, selenium, and JMeter. When Bharath is away from the keyboard he loves to spend time with family, hit the links, and aspires to be a Champions Tour Player.

  • l-2732

    Hi, nice article. I recommend not to use the browser.text_field(:id,’ext-element-34′) ,
    because no one guarantees you that next time it is not ext-element-35. Instead, simply try to search you text field via class!

    • Bharath Khambadkone

      Hi, totally agree. Thanks for your input!

What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.


We're Hiring!

Join our awesome team of dedicated engineers.