05 March 2013

Tutorial: Up and Running with Cucumber and Watir-webdriver in a few min.

Making a New Project with Watir-Webdriver and Cucumber

UPDATE: By request, I've added some more detail of the full step_def file, feature file and results to the end of this post.

UPDATE FOR REVIEWERS: Idiots and morons at Google have seen fit to unpublish this post. Reason? They say it is malware/virus related. Can you believe that? I thought Google hired smart people. Whoever flagged this doesn't know a virus from their ass. This is web automation, used in testing - you know what happens at places like google. It's also some 10+ years old. It's reasons like this that I am thankful I walked away from Blogger. Now I need to find out how to delete my blogger. I just want the moron who wrote this up to look at how stupid he/she is. STUUUUUPPPPPPPIIIIIIDDDDDDD. This tutorial uses the awesome RubyMine IDE by Jetbrains.

Step 1: Have Rails installed.  Go to your console and do a Rails new [project name]
Step 2: If you get a SSL issue...
Then edit the gemfile and change the https to http for the rubygems.org call

Step 3: Set up depdancies, in the above screen shot I've added a block for watir-webdriver and cucumber, like so:
group :test, :development do
  gem 'cucumber-rails'
  gem 'database_cleaner'
  gem 'rspec'
  gem 'spork'
  gem 'watir-webdriver'
  gem 'gherkin'
  gem 'rest-client'
end

Step 4:  Bundle... you can do this in RubyMine or command line... in ruby mine you do it like this:
Step 5: Configure the project with Cucumber... You do this with the Rails Generator.  You could use the command line, but I'm going to show the steps in screenshots from RubyMine:






It will now configure the project - an update will be displayed at the bottom of the IDE.
You're all set to write/run tests now!

Creating a Sample Test

Step 1: Right-click the Features folder and select "new"

Give it a name ending with.feature:

Step 2: BDD
Once you have a .feature file, lets give it some BDD's... in this example I used a scenario of searching for cucubmers on amazon.  So I typed:
Feature: lets search amazon for cucumbers
  Scenario: A user goes to amazon.com and searches for cucumbers
    Given a user at amazon.com
    When they search for "cucumbers"
    Then the results return for "cucumbers"

Notes the words in quotes?  Cucumber is smart enough to use that as a dynamic replacement.  In other words, if you say later, well i want to test that i can find onions, you replace "cucumbers" with "onions" and the variable is passed through dynamically without rewriting code.




Step 3: Create a step definition file.  This is where we put our code to drive the BDD elements.  You can follow these screenshots:




Step 4: writing the code
I need to now define the steps.  I define a class variable of @browser to be equal to Watir::Browser.new :firefox
Now whenver @browser is used it calls firefox (we can change the browser dynamically later)

So @browser.goto "http://www.amazon.com" goes to that URL.

For the When statement of supplying a value in the search box, I used firebug on amazon.com and saw this for the search input:
<input type="text" autocomplete="off" name="field-keywords" value="" title="Search For" id="twotabsearchtextbox" style="padding-right: 1px;">

We can use any unique identifying element within the input tag.  Note that watir webdriver uses the term "text_field" for inputs that take text... like: @browser.text_field(:name=>"field-keywords").set "cucumber"

We could have also used title, or id.  it's up to you.

My when clause looks like this:
When /^they search for "([^"]*)"$/ do |arg|
  @browser.text_field(:name=>"field-keywords").set "#{arg}"
  @browser.send_keys :return
end


So remember, if a person changes the BDD value in quotes from "cucumber" to "onion" it will pass into this, setting the value in that input field.

For the Then, i did this:
Then /^the results return for "([^"]*)"$/ do |arg|
  @browser.h1(:id=>"breadCrumb") == arg
end


there's a variety of ways you could assert, I choose this. 


There's so much you can do... you can send key commands like Control A, Right click, you can close and open pop ups... use the env.rb file to set default properties like logging in... all sorts of great stuff.


Update: Here's the code for this tutorial:


Step Definition File:


Given(/^a user at amazon.com$/) do
  @browser = Watir::Browser.new :firefox
  @browser.goto "http://www.amazon.com"
end
When(/^they search for "([^"]*)"$/) do |arg|
  @browser.text_field(:name=>"field-keywords").set "cucumber"
  @browser.send_keys :return
end
Then(/^the results return for "([^"]*)"$/) do |arg|
  @browser.h1(:id=>"breadCrumb") == arg
end

Feature File:

Feature: lets search amazon for cucumbers
  Scenario: A user goes to amazon.com and searches for cucumbers
    Given a user at amazon.com
    When they search for "cucumbers"
    Then the results return for "cucumbers"

This is just starter code, as you get going, you'll want to move the browser definition into the env.rb file... and make the browser a variable, so you can easily switch the tests from IE to FF, to Chrome, etc.  I have posts on doing just that. 

PASS and Fail.

If you right click and run the test in RubyMine, it will give you the results in the console. It will look like this:
 1 scenario (1 passed)
3 steps (3 passed)
0m10.526s

Similarly, if you run the tests from the command line using the command "cucumber" in your folder... it will output the same results.

Lastly, if you do want the results as a report, you can use a cucumber reports plugin with Jenkins, and when you build the jobs in Jenkins the output is added to a HTML report.  This last reporting method takes more work to set up and I have a post on setting it up.

4 comments:

  1. Hi Brian. I appreciate your tutorial. For clarity, I'd suggest including your final code as written within the step definition file, and a demonstration of passed and failed output. That way newbies like me can make sure we're doing it right. :-) Thanks and cheers, Bagger

    ReplyDelete
  2. Thanks Stephen, I'll do that, and update this post with that detail.

    ReplyDelete
  3. Looking forward to the update as well. Pretty new to the dev world and found this blog very helpful. Thank you Brian! well done.

    ReplyDelete
  4. Hi Stephen and Chef T, I've added the details on my step definition file, as well as the feature file, and the reporting of pass/fail states. Let me know if that helps or not.

    ReplyDelete