Home > cucumber, ruby, selenium > Automated Testing with Cucumber + Capybara

Automated Testing with Cucumber + Capybara

In this post we will introduce another gem called Capybara.

Capybara is an acceptance testing framework with a higher level API and support for multiple backends, supports Selenium and runs in different browsers.

Others may ask, “Why would I use capybara if selenium could also drive the browser the way I want it?”  Well, one advantage I appreciate is Capybara’s higher-level API compared to selenium.

Let’s take for example a simple scenario of typing strings to an input textbox:

Selenium-webdriver snippet


require 'selenium-webdriver'

element = driver.find_element :name => "q"
element.send_keys "Cucumber tests"

Capybara snippet

require 'capybara'

fill_in "q", "Cucumber tests"

You can obviously see from this example that Capybara enforces easier writing scripts ability. For a complete documentation on Capybara you can check this link from Github which I found very helpful.

After installation setup discussed in my previous post Introduction to Cucumber, you need to have the following folder structure and files:

I. Base Folder

Base Folder Structure

where:

features – folder to host all your feature files

step_definitions – folder to host all your step definition Ruby files

support – folder to host your configuration files (env.rb)

Gemfile – defines the top-level gems to be used in your project

II. Features

– describes the features that a user will be able to use in the program

Sample: simple_search.feature


Feature: As a user I should be able to perform simple google search

Scenario: A simple google search scenario
 Given I am on the main google search
 When I fill in "q" with "Cucumber test"
 And I click "gbqfb" button
 And I click on the first result
 Then I should see "Cucumber lets software development teams describe how software should behave in plain text."

III. Step Definition

– describes the actions that user will do for each step.

Sample: search_step.rb

Given /^I am on the main google search$/ do
 visit ('/')
end

When /^(?:|I )fill in "([^"]*)" with "([^"]*)"$/ do |field, value|
 fill_in(field, :with => value)
end

Then /^I click "([^"]*)" button$/ do |button|
 click_button(button)
end

Then /^I click on the first result$/ do
 find(:xpath, "//html/body/div[3]/div[2]/div/div[5]/div[2]/div[2]/div/div[2]/div/ol/li/div/h3/a").click
end

Then /^I should see "([^"]*)"$/ do |text|
 page.should have_content(text)
end

IV. Support

– hosts all configuration files

Sample: env.rb

require 'capybara'
require 'capybara/cucumber'

Capybara.default_driver = :selenium
Capybara.app_host = "http://www.google.com"
Capybara.default_wait_time = 20

World(Capybara)

V. Gemfile

– a format for describing gem dependencies required to execute Ruby codes

Sample: Gemfile


source "http://rubygems.org"

group(:test) do
 gem 'cucumber'
 gem 'capybara'
 gem 'rspec'
end

VI. Run

Using terminal go to your root project folder and type: cucumber or bundle exec cucumber

After the run, you should be able to see the results like this:

1 scenario (1 passed)
5 steps (5 passed)
0m9.461s

This example runs smoothly in Windows 7. Let me know if it works for you as well.

Advertisements
  1. marvinsanity
    October 30, 2012 at 3:04 pm

    A must read for those testers who are looking for new knowledge about automated testing. thanks! 🙂

  2. November 7, 2012 at 1:10 am

    Thank you. Very useful. Got to learn something new

  3. Junn G
    February 6, 2013 at 1:31 pm

    Hi Girlie, is there a way for capybara to use IRB? just like in Selenium RC? =)

  4. July 19, 2013 at 6:57 pm

    hi junn, you can do one thing. in IRB require capybara gem and try using its methods. see if this works
    regards, girlie
    sorry super late reply

  5. Hanh
    October 8, 2014 at 5:45 pm

    thanks, very useful

  6. Nourha
    January 21, 2015 at 9:15 pm

    The google search button id you have mentioned, can’t be found by capybara, what can i do?

  7. May 14, 2015 at 4:01 pm

    Hi Nourha,
    You could always inspect the element using firebug to point you the correct element locator, as the element name could be changing base on implementation.
    e.g.
    input value=”Google Search” aria-label=”Google Search” name=”btnK” type=”submit” jsaction=”sf.chk”
    button class=”lsb” value=”Search” aria-label=”Google Search” name=”btnG” type=”submit”

    Regards,
    Girlie

  1. October 29, 2012 at 5:18 pm
  2. November 1, 2012 at 8:27 pm
  3. November 1, 2012 at 8:36 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: