Capybara Tutorial with Cucumber! All Details with Examples!

January 1, 2022 by Onur Baskirt

In Capybara Tutorial with Cucumber post, we will learn this tool’s details with examples. I generally use Selenium Webdriver for web test automation projects. It is a great and well-known framework for this purpose. It has a very large community and supports so when you get in trouble, you can find the solutions easily.

On the other hand, some of my friends are big fans of Ruby for testing. I also attended some of Ruby Testing Seminars and saw its features and capabilities. In my opinion, Ruby has a very clean coding syntax and it is easy to learn. It does not require too much effort in automation with its libraries such as Capybara for driving web applications, RestClient for interacting with web services, SitePrism for POM (Page Object Model).

In this post, I will explain how to do installation and setup for Ruby, Capybara, and Cucumber. It is a quick start tutorial for Ruby Testing beginners. First, let’s start with definitions.

What is Capybara?

On Capybara’s official page it is described as follows: “Capybara is a library written in the Ruby programming language which makes it easy to simulate how a user interacts with your application. Capybara can talk with many different drivers who execute your tests through the same clean and simple interface. You can seamlessly choose between Selenium, Webkit, or pure Ruby drivers. Capybara automatically waits for your content to appear on the page, you never have to issue any manual periods of sleep.”

A Sample Capybara Feature:

When /^I login with "(.*?)" username and "(.*?)" password$/ do |user, password|
    fill_in 'username', :with =>; user
    fill_in 'password', :with =>; password
    click_button 'Login'
end

What is Cucumber?

Cucumber is a framework for writing and executing high-level descriptions of your software’s functionality. It supports Behavior Driven Development (BDD). It offers a way to write tests that anybody can understand, regardless of their technical knowledge. The language that Cucumber understands is called Gherkin. Cucumber itself is written in Ruby, but it can be used to “test” code written in Ruby or other languages, including but not limited to Java, C#, and Python.

An example Gherkin script:

Scenario: Filter the television list
    Given some different televisions in the TV listing page
    When I visit the TV listing page 
    And I search for "Samsung" TVs
    Then I only see titles matching with Samsung TVs
    When I erase the search term
    Then I see all television brands again

Installation and Setups

Step-1: Install Ruby

For Windows the best place to install Ruby is http://rubyinstaller.org/downloads/. Go to that site and install the latest 32-bit version of Ruby, when I am writing this article latest version was Ruby 2.2.4. You can go with the latest version when you are reading this article.

Note: The 64-bit versions of Ruby are relatively new in the Windows area and not all the packages have been updated to be compatible with it.

In this post, I will go with Ruby 2.2.4 version when you read this article, you can use the latest version and I selected the below options during installation. Make sure you check the option to “Add Ruby executables to your PATH.”

Check Ruby installation with ruby -v command. You will see the Ruby version as shown below.

Check RubyGems installation by running gem -v on a command line. RubyGems is the package manager for Ruby and should come with the standard Ruby installation.

Step-2: Install Ruby Development Kit

Download Ruby Development Kit on the same page. It will allow Ruby to build native extensions for libraries. In 2021, ruby and devkit bundled and you can install them together. :-)

Or you can continue the standalone installation. By clicking the archives link on the installation page.

Extract it into C:/DevKit folder.

Open a command prompt and go to C:/DevKit folder and run ruby dk.rb init command to generate config.yml file to be used later.

Run ruby dk.rb install This step installs (or updates) an operating_system.rb file into the relevant directory needed to implement a RubyGems pre_install hook and a devkit.rb helper library file into <RUBY_INSTALL_DIR>\lib\ruby\site_ruby.

In order to test your installation, run the below command.

gem install json –platform=ruby

If JSON is installed correctly, you should see the below screen.

Step-3: Install Cucumber

Run gem install cucumber command to download and install Cucumber automatically. After installation, run cucumber –help command to confirm that installation is successful.

Step-4: Install Capybara

Run gem install capybara to download and install the Capybara web automation library.

Step-5: Install Selenium Webdriver

Run gem install selenium-webdriver to download and install the Selenium web automation framework.

Step-6: Install RSpec

Run gem install rspec to download and install RSpec. It is an extensive library for assertions. (By the way, there is a very nice tutorial at codeschool.com, its name is “Testing with RSpec”. I suggest you check that course.)

**Step-7: Install Ansicon (Optional)**

If you want to colorize the command prompt when running cucumber features, you need to install ANSICON because Windows does not understand ANSI color escape sequences.

In order to download the latest release of ANSICON, go to https://github.com/adoxa/ansicon/downloads.
Create C:\Ansicon directory and Unzip the download file into it.
Open a command prompt and navigate to C:\Ansicon folder.
Navigate to X64 folder if your machine is 64bit otherwise go to X86 folder.

Execute “ansicon.exe -i” to install and add ANSICON to your Windows.

Automation with Ruby & Capybara & Cucumber

First, we need to create a feature directory. We add all feature files into this folder.

Feature files should be written with Gherkin Syntax (Given-When-Then). Gherkin, a domain-specific language (DSL) that “lets you describe the software’s behavior without detailing how that behavior is implemented.”

Each scenario can have up to three parts: Given, When, and Then:

Given – Given lines describe what pre-condition should exist.
When – When lines describe the actions you take.
Then – Then lines describe the result.

There are also And lines, which do whatever the line above them does. For example:

Given I am on the product page
And I am logged in
Then I should see "Welcome!"
And I should see "Personal Details"

In this case, the first And line act as a Given line, and the second one acts as a Then line.

Go into the features folder and create test.feature file. Our test scenario is:

Go to www.google.co.uk
Search yahoo
See the yahoo in search results
Click the yahoo link
Wait 10 seconds

Now, open test.features file with notepad++ or another text editor and write the above test scenario as Gherkin syntax.

Feature: Find the Yahoo Website
Scenario: Search a website in google        
 Given I am on the Google homepage
 When I will search for "yahoo"
 Then I should see "yahoo"
 Then I will click the yahoo link
 Then I will wait for 10 seconds

It is better to use fewer Given-When-Then statements in order not to create Given-When-Then Hell. In the above code, three Then statements are not a good Gherkin standard. You can try to merge them single Then statement. The last two Then statements are normally not necessary, I have added them for demonstration purposes.

Given: You can use this for data preparation and test prerequisite operations.

When: This is the action. You can do the actions with the When keyword.

Then: Then is generally using for verifications and assertions.

The below pattern is a good Gherkin Pattern.

Feature: Find the Yahoo Website Scenario: Search a website in google 
  Given I am on the Google homepage 
  When I will search for "yahoo" 
  Then I should see "yahoo"

After writing the feature file try to run the test with the below command.

cucumber features\test.feature

We haven’t defined the test steps yet. Thus, we will get the below result after test execution.

In order to prepare the step definition file, first, create a folder as step_definitions in the features folder and then create test_steps.rb file. The directory structure should be like that:

You can copy the code snippets of the test result and paste them into test_steps.rb file. Now, we can write the test steps. I want to show you how to do it, step by step.

Step-1: First, we need to navigate to google.co.uk website. Capybara provides visit method for this function. In Selenium, we can do this with driver.get() or driver.navigate().to() methods. So, we should add the below line to go google.co.uk.

visit 'http://www.google.co.uk'

Step-2: After the above operation, we are on google.co.uk page, now it is time to write the search text into the search bar. As shown below figure, the search bar’s id is “lst-ib”.

Capybara provides us fill_in method for text entrance operations. We can do this operation with the below line. In Selenium, we can do this with textElement.sendKeys(String) method.

fill_in 'lst-ib', :with => searchText

Step-3: Then, we need to check expected search results on the current page. To do this we can use the page.should have_content method. In Selenium, we can do this with JUnit, TestNG, or Hamcrest assertions. For example, assertThat(element.getText(), containsString(“yahoo”));

page.should have_content(expectedText)

Step-4: Then, it is time to click the yahoo link. As shown below figure link text is “yahoo”.

In Capybara, we can use click_link method to do this. In Selenium, we can do this with driver.findElement(By.linkText(“Yahoo”));

click_link('Yahoo')

Step-5: At the last step, we will wait for 10 seconds statically to see the yahoo website. To do this, we can use sleep(10) method. In Selenium, we use Thread.sleep(10000);

Now, it is time to put them together. Our test_steps.rb code is shown below.

#Navigate to google.co.uk
Given(/^I am on the Google homepage$/) do
	visit 'https://www.google.co.uk/'
end

#Write "yahoo" search text to the search bar  
When(/^I will search for "([^"]*)"$/) do |searchText|
	fill_in 'lst-ib', :with => searchText
end

#In the current page, we should see "yahoo" text
Then(/^I should see "([^"]*)"$/) do |expectedText|
    page.should have_content(expectedText)
end

#Click the yahoo link 
Then(/^I will click the yahoo link$/) do
    click_link('Yahoo')
end

#Wait 10 seconds statically to see yahoo website
Then(/^I will wait for (\d+) seconds$/) do |waitTime|
	sleep (waitTime.to_i)
end

After writing step definitions, create a support folder into the features folder and create a env.rb file for environmental setups. Then, just copy and paste below environmental setup into that file and save it. I got this setup from reference-3.

require 'rubygems'
require 'capybara'
require 'capybara/dsl'
require 'rspec'

Capybara.run_server = false
#Set default driver as Selenium
Capybara.default_driver = :selenium
#Set default selector as css
Capybara.default_selector = :css

#Syncronization related settings
module Helpers
  def without_resynchronize
    page.driver.options[:resynchronize] = false
    yield
    page.driver.options[:resynchronize] = true
  end
end
World(Capybara::DSL, Helpers)

And Finally, we are ready to run our feature file. First, go to your project directory. It contains a features folder as shown below.

Then, run the below command.

cucumber features\test.feature

And, enjoy watching the test execution :)

Conclusion

In this article, I wanted to describe the first steps of test automation with Ruby, Cucumber, and Capybara. I hope that you were also successful with these instructions. This article is just the beginning of this topic. You should do more research on references and official pages to improve your test automation skills and knowledge of Ruby, Cucumber, and Capybara. If you want to ask more questions, please do not hesitate to write your comments in the comments section. Thanks for reading my article. Happy testing! :)

References

https://cucumber.io/

http://agileforall.com/getting-started-with-ruby-cucumber-and-capybara-on-windows/

http://www.gamesparks.com/blog/automated-testing-with-cucumber-and-capybara/

http://shashikantjagtap.net/cucumber-capybara-poltergeist-rockstar-bdd-combo/

https://www.gridlastic.com/capybara-cucumber-code-example.html

http://code.tutsplus.com/tutorials/ruby-for-newbies-testing-web-apps-with-capybara-and-cucumber–net-21446

https://semaphoreci.com/community/tutorials/introduction-to-writing-acceptance-tests-with-cucumber

https://girliemangalo.wordpress.com/2012/10/29/automated-testing-with-cucumber-capybara/