8 Steps to Create a Simple Capybara Test

Posted by Flatiron School  /  November 4, 2013

The following is a guest post by Iris Lee and originally appeared on her blog. Iris is currently in the Ruby-003 class at The Flatiron School. You can follow her on Twitter here.

What’s Capybara?

Blog post image: tumblr_inline_mvqtyrHtX91rtan47.png

Capybara is basically a library that helps you test web applications by simulating how a real user would interact with your app.

Capybara requires Ruby 1.9.3 or later. To install, type in your terminal:

Blog post image: tumblr_inline_mvqtzhZK1d1rtan47.png

Capybara tests are often called feature tests or end-to-end testing. It was built on top of Nokogiri in order to discover the elements on a page using HTML and CSS. It is a DSL (Domain Specific Language) that is built on top of RSpec and Cucumber.

Capybara tests are like RSpec tests with Capybara flavoring (yum giant rodent). Some keywords:

Blog post image: tumblr_inline_mvqu0hJIq71rtan47.png

Capybara uses a web driver (in this example Selenium) to do some browser magic. It lets you control the browser through code and has the browser take actions on your behalf in order to make sure the website actually works as the user will experience. Normally a “headless browser” is used to save memory, but the example below will show it to you live…for funsies.

Examples of Capybara syntax:

Blog post image: tumblr_inline_mvqu19Yrry1rtan47.png

Capybara with Google and Youtube Searches.

You can download this code here.

Step 1

In your project folder, add Capybara and Selenium-WebDriver to your Gemfile. It should look like this:

Blog post image: tumblr_inline_mvqu1zdmeI1rtan47.png

Step 2

Don’t forget to bundle.

Blog post image: tumblr_inline_mvqu2neJCf1rtan47.png

Step 3

Create a simple_app.rb file (it got mad at me if I didn’t include this file).

Blog post image: tumblr_inline_mvqu3csX9S1rtan47.png

Step 4

Normally, there’d be more folders in your application, but this is a very simple example so everything is in the top level.

Your environment.rb should look like this:

Blog post image: tumblr_inline_mvqu3xafvw1rtan47.png

Step 5

And your…

Blog post image: tumblr_inline_mvqu4lMIcW1rtan47.png

Step 6

Require Capybara in your spec_helper.rb file:

Blog post image: tumblr_inline_mvqu5aKSwD1rtan47.png

Step 7

Here’s what my features_spec.rb looks like. I’m using Capybara to search for “Flatiron School” and then visiting YouTube to look for cat videos. In each describe block, I tell Capybara to visit the website and fill in the text field with what I’m searching for and then click submit. The sleep 2 is there to slow down the process so you can see it better in Step 8.

Blog post image: tumblr_inline_mvqu64i1To1rtan47.png

Step 8

Now run rspec in your terminal and watch it do the searches and pass the tests.