Using Cucumber to write BDD tests for an Extjs 5 App

In my previous blog I wrote about how you can get started with writing end to end tests for sencha apps. In this blog post I’m going to show how you can get started using cucumber to write BDD tests for a Ext JS 5 app. The Application under test will be the Ext JS 5.0 example Ticket App and can be found @ http://dev.sencha.com/extjs/5.0.0/examples/ticket-app/index.html

I have already put together a ruby+cucumber+watirwebdriver boilerplate in github which we will be using in this blog post.

Please checkout the source from github and follow the steps in the readme to get cucumber setup. The sample tests in there were written against our website (https://moduscreate.com), but please ignore the feature files in the repository for now.

Lets write our feature file first to get started. Create a new file named extjs5.feature inside the cukeit/features folder

cd cukeit/features
touch extjs5.feature

copy the contents of the feature file to the extjs5.feature file.

Feature: Sample Extjs5 BDD test

@desktop
Scenario: Edit a Project Member
  Given I am on the Ticket home page
  Then I must see the page title "Ticket"
  Given I log in the application
  And I wait for the "Project Summary - SDK" text to be displayed
  Then I must see the text "Ticket Status Summary" displayed
  And I must see the text "Project Members - Lead: Don" displayed
  Given I click the "Edit" span
  And I wait for the "Edit User: Tommy" text to be displayed
  Given I enter "Thomas" in the test field named "textfield-1073-inputEl"
  And I click the "Close" span
  And I wait for the "Edit User: Thomas" div to close
  Then I must see the text "Thomas" displayed

Execute the feature file in dry run mode buy adding a -d option

cucumber features/extjs5.feature -d

You should see an output like this

copy the output from your console and paste it into a new file named extjs5_steps.rb under the step_definitions folder. Here is where you will be writing your step definitions in ruby so a little bit of ruby knowledge will be very helpful.

Copy the code below into the extjs5_steps.rb file

Given(/^I am on the Ticket home page$/) do
  @browser.goto("http://dev.sencha.com/extjs/5.0.0/examples/ticket-app/index.html")
end

Given(/^I log in the application$/) do
  Watir::Wait.until { @browser.text.include? 'Login - Ticket App' }
  @browser.text_field(:name,"password").set "blah"
  @browser.span(:text,"Login").click
end

Given(/^I wait for the "(.*?)" text to be displayed$/) do |arg1|
  Watir::Wait.until { @browser.text.include? arg1 }
end

Then(/^I must see the text "(.*?)" displayed$/) do |arg1|
  assert_includes(@browser.text,arg1)
end

Given(/^I enter "(.*?)" in the test field named "(.*?)"$/) do |text, text_field_name|
  @browser.text_field(:name,text_field_name).set text
end

Given(/^I wait for the "(.*?)" div to close$/) do |div_text|
  @browser.div(:text,div_text).wait_while_present
end

To execute the tests run the following command

cucumber features/extjs5.feature

You should see the all the test steps passing!!

This was just a basic introduction on how you can use cucumber to write acceptance tests which also acts as living documentation. You can also use cucumber to write tests against any kind of application. For more information on cucumber please visit http://cukes.info. There are also two very good books that you can read. The Cucumber Book and Cucumber Recipes