Using Capybara in your Rails Application

I had the opportunity to have Li Ouyang tutor me on Test Driven Development with Capybara recently. Since getting my feet wet with Rspec, I’ve wondered how to use Capybara in my Rails application. Li was very kind to teach me so.

Follow these steps for your first taste of Capybara. Not this one, though.

First, create a news Rails project:


$ rails new my_tdd_practice

go to your app folder and open up your project with your favorite text editor. In your Gemfile add the gems


group :test do 
  gem 'rspec-rails'
  gem 'capybara'
end

After bundle installing, type the command in your terminal


$ rails generate rspec:install

This will create the spec folder necessary for your application. This is the folder where all your test files will be in.

In TDD fashion, we started with first things first: whether the site would work when someone typed its url.

In order to do that we created a folder in the spec file called “feature”(mandatory step). Within the feature folder we made the “view_home_page_spec.rb” file. Note the _spec.rb as the last part of the file name. It is important to add it because this is how Rspec will recognize it is a test file.

In the view_home_page_spec.rb file, we coded:


require 'spec_helper'

feature "view Homepage" do
 before(:each) {visit root_path}

  scenario "user can access homepage" do
    page.status_code.should eq(200)
  end

end

Notice how Capybara syntax has the feature block and the scenario block, similar to Rspec’s “describe” and “it”.

Once that was done we ran


$ rspec spec

which resulted in


=> Failures:

  1) view Homepage user can access homepage
     Failure/Error: visit root_path
...

The command “rspec spec” runs all test files in your spec folder.
The test failed as anticipated because we hadn’t yet created controllers or views for the application.

We went on to create the missing pieces.


$ rails generate controller welcome

And we added the index method in the welcome controller and the index.html.erb in the views folder.

We ran the spec again and all passed.

Notice that these were the minimum aspects we decided we wanted to test in our application. TDD is exactly this. One decides to test a minimum working feature of an application, build an spec for it, run the test so it fails, write the method that allows the test to pass, refactor/review any code, and run the specs again. If green light shows up, then you move to the next part you want to test. It is an methodical process and it requires discipline.

Next, we wanted to add a text to the welcome page, so we coded a test for it.


require 'spec_helper'

feature "view Homepage" do
 before(:each) {visit root_path}

  scenario "user can access homepage" do
    page.status_code.should eq(200)
  end

  scenario "user see relevant information" do
    page.should have_content(/Hello World!/i)
  end

end

“have_content(/Hello World!/i)”is the Capybara syntax that searches a page and check if the content passed as the argument of the method “have_content” can be found.

After running rspec to see if the test failed (a sign that the spec code you wrote is working) we wrote “Hello Word!”on the index.html.erb file. We ran the test again and this time it passed.

As the last piece of code for our spec, we wanted to see if the “Hello World!” was a h2 tag.


require 'spec_helper.rb'

#Capybara syntax. Integration test or feature test
feature "view Homepage" do
 before(:each) {visit root_path}

  scenario "user can access homepage" do
    page.status_code.should eq(200)
  end

  scenario "user see relevant information" do
    page.should have_content(/Hello World!/i)
  end

  scenario "expect to have css" do
    expect(page).to have_css 'h2', text: 'Hello World!'
  end

end

The last piece of code checks if the content is a h2 element. Soon after failing the test once, we added <h2>Hello World!</h2> to the view and voilá all three examples were green.

All and all, I enjoyed my first implementation of Capybara in a Rails application. I'm confident I am on my way to become a TDD master, but at the same time I'm aware I still have much to cover. My gratitude goes to Li to have shown me the path 🙂

In case you're curious, this is the Github repo where you can peep at the code

Happy Testing!

Advertisements

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s