Automated Testing Tools: First Steps with the Capybara Testing Tool

performance-featured

Capybara is one of the widely used automated testing tools that acts as an effective wrapper for web drivers like Selenium, Webkit, Rack Test and Poltergeist. The customized methods in the Capybara testing tool are implemented in Ruby. Additionally, Ruby has numerous libraries and frameworks – like Ruby on Rails – that make pre-written code accessible, making your testing task easier.

This guide also serves as one of the first steps in Capybara for web application test automation, especially for teams adopting Ruby Capybara test automation in behavior-driven development environments. Scripts written in Gherkin can be mapped to Capybara code for behavior-driven development of projects.

In this article, we describe several Capybara methods that support automated testing tools by simulating user input. Some methods help “set” the input, while others “get” (verify) page elements. Let’s now look at some Gherkin scenarios for a user updating identity details.

Filling in Text Fields

Let us look at an example for filling in a text field using Capybara:

1
2
3
4
5
6
7
8
Scenario: Verify existing data and edit employee info on Edit Employee Profile page
Given Joe Molly is on Edit Employee Profile page
When Joe Molly clicks on Identity tab
Then Joe Molly should see "Joe" in "First Name*" text box
And Joe Molly should see "Molly" in "Last Name*" text box
When Joe enters "Bob" in "First Name*" text box
And Joe Molly clicks Save button
Then Joe Molly verifies message "Your Identity changes have been submitted successfully." on Edit Employee Profile page

The underlying Capybara testing code for automating the scenario.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Given(/^Joe Molly is on Edit Employee Profile page$/) do
visit("user/profile/edit")
page.should have_content("Update Your Identity")
end

When(/^Joe Molly clicks on Identity tab$/) do
element = page.find_link(“Identity”)
element.trigger(‘click’)
end

And(/^Joe Molly should see “([^”]*)” in “([^“]*)” text box$/) do |value, textBoxName|
element = find_field(textBoxName)
textBoxValue = element.value
textBoxValue.should eq value
end

When(/^Joe enters “([^”]*)” in “([^“]*)” text box$/) do |value, textBoxName|
fill_in(textBoxName, :with => value)
end

And(/^Joe Molly clicks Save button$/) do
button = find_button(“Save”)
button.trigger(‘click’)
end

Then(/^Joe Molly verifies message “([^”]*) on Edit Employee Profile page$/) do |messageText|
page.should have_content(messageText)
end

Let’s take a closer look at the methods used in Ruby Capybara test automation.

The visit (line 2) method navigates to the given URL. Then, page.should have_content (line 3) checks whether the text is visible on the page. By default, this method waits up to 2 seconds for the element to appear.

Next, page.find_link (line 7) finds the Identity link, and element.trigger (line 8) clicks on it. Similarly, find_field (line 12) finds the textbox and assigns it to the variable ‘element’. Finally, find_button (line 22) finds the ‘Save’ button, and trigger clicks it.

Get and Set Methods

Get method: The .value method gets the value and stores it in the variable ‘textBoxValue’.

    textBoxValue = element.value
 
Set method: fill_in locates the text field by its name, ID or label text and fills in the value.
1
2
3
  When(/^Joe enters "([^"]*)" in "([^"]*)" text box$/) do |value, textBoxName|
fill_in(textBoxName, :with => value)
end

Choosing a Radio Button

We can use a similar scenario to handle radio button input.

1
2
3
4
5
6
7
Scenario: Verify employee's gender is shown correctly in Edit Employee Profile page
Given Joe Molly is on Edit Employee Profile page
When Joe Molly clicks on Identity tab
Then Joe Molly verifies that "Male" radio option is selected for gender
When Joe Molly selects "Female" radio option for gender
And Joe Molly clicks Save button
Then Joe Molly verifies message "Your Identity changes have been submitted successfully." on Edit Employee Profile page

What the code looks like.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Step definition:

Given(/^Joe Molly is on Edit Employee Profile page$/) do
visit(“user/profile/edit”)
page.should have_content(“Update Your Identity”)
end

When(/^Joe Molly clicks on Identity tab$/) do
element = page.find_link(“Identity”)
element.trigger(‘click’)
end

Then(/^Joe Molly verifies that “([^”]*)” radio option is selected for gender$/) do |radioButtonName|
page.has_checked_field?(radioButtonName)
end

When(/^Joe Molly selects “([^“]*)” radio option for gender$/) do |radioOptionName|
choose(radioOptionName)
end

And(/^Joe Molly clicks Save button$/) do
button = find_button(“Save”)
button.trigger(‘click’)
end

Then(/^Joe Molly verifies message “([^”]*) on Edit Employee Profile page$/) do |messageText|
page.should have_content(messageText)

Get method: page.has_checked_field? verifies whether the radio button is selected.

1
2
3
Then(/^Joe Molly verifies that "([^"]*)" radio option is selected for gender$/) do |radioButtonName|
page.has_checked_field?(radioButtonName)
end

Set method: choose finds the radio button and marks it as checked.

1
2
3
When(/^Joe Molly selects "([^"]*)" radio option for gender$/) do |radioOptionName|
choose(radioOptionName)
end

The Test Automation Playbook

Read The Test Automation Playbook to build a future-ready QA strategy with insights on tools, tactics, and ROI.

In Ruby Capybara test automation, page.has_checked_field? verifies whether the radio button is selected, while choose marks it as checked.

Checking a Checkbox

The check box for the “Do Not Contact” option is to be unchecked:

1
2
3
4
5
6
7
Scenario: Verify employee un-checks Do Not Contact option in Edit Employee Profile page
Given Joe Molly is on Edit Employee Profile page
When Joe Molly clicks on Identity tab
Then Joe Molly verifies that "Do Not Contact" checkbox is checked
When Joe Molly un-checks "Do Not Contact" checkbox
And Joe Molly clicks Save button
Then Joe Molly verifies message "Your Identity changes have been submitted successfully." on Edit Employee Profile page

The code for this scenario

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Given(/^Joe Molly is on Edit Employee Profile page$/) do
visit("user/profile/edit")
page.should have_content("Update Your Identity")
end

When(/^Joe Molly clicks on Identity tab$/) do
element = page.find_link(“Identity”)
element.trigger(‘click’)
end

Then(/^Joe Molly verifies that “([^”]*)” checkbox is checked$/) do |checkBoxName|
page.has_checked_field?(checkBoxName)
end

When(/^Joe Molly un-checks “([^“]*)” checkbox$/) do |checkBoxName|
uncheck(checkBoxName)
end

And(/^Joe Molly clicks Save button$/) do
button = find_button(“Save”)
button.trigger(‘click’)
end

Then(/^Joe Molly verifies message “([^”]*) on Edit Employee Profile page$/) do |messageText|
page.should have_content(messageText)
end

Get method: page.has_checked_field? verifies whether the checkbox is selected.

1
2
3
Then(/^Joe Molly verifies that "([^"]*)" checkbox is checked$/) do |checkBoxName|
page.has_checked_field?(checkBoxName)
end

Set method: uncheck removes the check from the checkbox.

1
2
3
When(/^Joe Molly un-checks "([^"]*)" checkbox$/) do |checkBoxName|
uncheck(checkBoxName)
end

Selecting from a Drop-Down Menu

1
2
3
4
5
6
7
Scenario: Verify employee's country is shown correctly in Edit Employee Profile page
Given Joe Molly is on Edit Employee Profile page
When Joe Molly clicks on Identity tab
Then Joe Molly verifies that "United States" is selected in "Country" drop down
When Joe Molly selects "Canada" from "Country" drop down
And Joe Molly clicks Save button
Then Joe Molly verifies message "Your Identity changes have been submitted successfully." on Edit Employee Profile page

The code for selecting the country name from a drop down box

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Given(/^Joe Molly is on Edit Employee Profile page$/) do
visit("user/profile/edit")
page.should have_content("Update Your Identity")
end

When(/^Joe Molly clicks on Identity tab$/) do
element = page.find_link(“Identity”)
element.trigger(‘click’)
end

Then(/^Joe Molly verifies that “([^”]*)” is selected in “([^“]*)” drop down$/) do |value, dropDownName|
case dropDownName
when ‘Country’
dropDownCssSelector = “#country”
end
element = find_field(dropDownCssSelector)
dropDownValue = element.value
dropDownValue.should eq value
end

When(/^Joe Molly selects “([^”]*)” from “([^“]*)” drop down$/) do |dropDownValue, dropDownName|
page.select dropDownValue, :from => dropDownName
end

Get method: value gets the selected option and stores it in dropDownValue.

  dropDownValue = element.value
 
Set method: page.select sets the new value in the drop-down box.
  page.select dropDownValue, :from => dropDownName

The .value method retrieves the selected option, while page.select sets the new value in the drop-down box. These examples demonstrate practical first steps in Capybara for web application test automation.

Performance Considerations in Automated Testing Tools

Some Capybara finder methods like select, fill_in, check, and choose retry searching for elements if they are not found immediately. As a result, this can increase test execution time and cause performance issues.

Overall, Capybara stands out among automated testing tools because it provides an easy-to-use framework. It combines the simplicity of Gherkin scripts with the powerful features of Selenium, making it ideal for Ruby Capybara test automation projects.

For more on BDD and Gherkin syntax, read the article “Why go for BDD?”

Frequently Asked Questions (FAQs)

What are automated testing tools?

Automated testing tools are software solutions that simulate user interactions and validate application functionality without manual intervention.

Why is Capybara popular in Ruby Capybara test automation?

Capybara integrates smoothly with Ruby frameworks like Ruby on Rails and supports behavior-driven development using Gherkin syntax.

What are the first steps in Capybara for web application test automation?

The first steps in Capybara for web application test automation include setting up the environment, writing Gherkin scenarios, and mapping them to Capybara step definitions.

How does Capybara simulate user input?

Capybara uses methods like fill_in, choose, select, check, and uncheck to simulate real user interactions.

Can Capybara work with Selenium?

Yes, Capybara acts as a wrapper around Selenium and other drivers to execute browser-based tests.

What are the advantages of using automated testing tools in web applications?

They improve efficiency, reduce human error, speed up regression testing, and ensure consistent test execution.

Logo Colour

Sign up to receive notifications when we post our next article, and stay OnPath with good QA practices.

Written by

Picture of OnPath Staff
OnPath Staff
The OnPath Staff is a mix of test engineers, marketers, and managers united by an interest in sharing useful QA insights clearly. What unites us isn’t just an interest in software quality, but a love for learning, collaborating, and making software a little bit better, every day.
Picture of OnPath Staff
OnPath Staff
The OnPath Staff is a mix of test engineers, marketers, and managers united by an interest in sharing useful QA insights clearly. What unites us isn’t just an interest in software quality, but a love for learning, collaborating, and making software a little bit better, every day.

Related content

you-x-ventures-Oalh2MojUuk-unsplash

The Benefits of Behavior-Driven Development in Agile Development

In modern agile development, cross-functional communication is critical to delivering high-quality software. As sprint cycles shorten and releases become more frequent, teams must collaborate...

Intelligent Data

Test Driven Development: Intelligent Data Types – JBehave Examples

Test driven development is a software design approach in which tests are written before the code itself, ensuring robust and reliable functionality. JBehave, a...

The Test Pyramid in 2026: Still Relevant, Still Necessary

Organizations are pushing hard to accelerate AI-assisted software delivery. Cloud-native applications scale up and down in real time. Mobile-first platforms are no longer optional....

Logo Colour

Get notified when we post our next article!

document.addEventListener("DOMContentLoaded", function () { var shareMailBtn = document.getElementById('shareMail'); if (!shareMailBtn) return; shareMailBtn.addEventListener('click', function (e) { e.preventDefault(); const subject = encodeURIComponent(document.title); const body = encodeURIComponent( `Hi, I came across this article on OnPath Testing and thought it would be worth sharing with you. ${window.location.href} Hope you find it useful. Best regards,` ); window.location.href = `mailto:?subject=${subject}&body=${body}`; }); });