How to Integrate Selenium with Capybara

There are times when you want to know how your capybara tests are interacting with your pages, sometimes it’s not enough the log on your console to determine why they are not working as expected, that’s why you can make it display the steps on your browser in real-time. The steps to do this are really easy thanks to the Selenium Project, which is in charge of providing us the necessary infrastructure to interact with the interface of all major web browsers.

Let’s start by specifying what tools we are going to use in this tutorial and the respective versions, it is not completely necessary to be the same as yours but it will be better if they are:

$ lsb_release -a
Ubuntu 18.04.4 LTS
$ rails -v
Rails 6.0.3.1
$ ruby --version
ruby 2.6.5p114 (2019–10–01 revision 67812) [x86_64-linux]

Ok, now we can start creating our project:

$ rails new myApp -T

We are going to use the -T option in order to not generate the test files because we are going to do it manually. After that, we need to go inside our project folder:

$ cd myApp

I always test trying to run the server before continuing to make sure that everything is installed correctly, and checking if no error log was displayed on the console

$ rails s

If everything is ok, we can continue.

To follow the TDD approach, first, we need to create our test cases with RSpec and Capybara, so let’s start putting in our Gemfile file the necessary gems in the development and test group:

group :development, :test do
  .
  .
  .
  gem 'rspec-rails', '~> 4.0', '>= 4.0.1'
  gem 'capybara', '~> 3.32', '>= 3.32.2'
  gem 'selenium-webdriver', '~> 3.142', '>= 3.142.7'
end

Note that, the three points before the gems are just to indicate the already added gems in your project.

We can proceed to install the gems now (you can also use bundle install that is the same):

$ bundle

If everything was installed correctly, now we need to install and configure our gems, let’s start with RSpec, to do it we only need to run the next command:

$ rails g rspec:install

Our little rodent friend Capybara is a little bit more elusive. First, we need to put in the first line of our /spec/rspec_helper.rbfile:

require 'capybara/rspec'

In our /spec/rails_helper.rb file:

Capybara.register_driver :selenium_chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.javascript_driver = :selenium_chrome

We also need to change the use_transactional_fixtures parameter to false:

config.use_transactional_fixtures = false

This is how our rails_helper.rb file should look after modifications and deletion of comments:

require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../config/environment', __dir__)
abort('The Rails environment is running in production mode!') if Rails.env.production?
require 'rspec/rails'
require './spec/support/factory_bot'

begin
  ActiveRecord::Migration.maintain_test_schema!
rescue ActiveRecord::PendingMigrationError => e
    puts e.to_s.strip
    exit 1
end

Capybara.register_driver :selenium_chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.javascript_driver = :selenium_chrome

RSpec.configure do |config|
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
  config.use_transactional_fixtures = false
  config.infer_spec_type_from_file_location!
  config.filter_rails_from_backtrace!
end

We also need to install the chromium chrome driver, if you don’t have it yet. To install it in Ubuntu, you only need to run:

sudo apt-get update
sudo apt-get install chromium-chromedriver

If you have a different OS, you can look at the official web page to find the instructions https://chromedriver.chromium.org/downloads.

Alright, since we did a lot of things without even having started a test yet, we can finally proceed to write our test blocks. We need to create a folder called features inside our /spec folder, and inside of it, we create our posts_spec.rb file to contain our test block.

/spec/features/posts_spec.rb:

require 'rails_helper'
RSpec.describe Post, driver: :selenium_chrome, js: true do
describe 'the create posts process' do
    it 'should create a post' do
      visit new_post_path
    
      fill_in 'Title', with: 'Post title'
      fill_in 'Content', with: 'Post content'
    
      click_button 'Create Post'
      expect(page).to have_content 'Post was successfully created.'
    end
  end
end

The first line requires the existence of the

rails_helper

:selenium_chrome

js: true

Our test is finished!

But of course, it will fail

because we haven’t implemented the feature in our project yet. But don’t worry, we are going to do it now.

To go directly to our goal, we are going to skip the structure necessary for real-world post creation, such as the belonging of a post to a user. In our app the posts are going to be created anonymously, that means, without any user as owner.

To save us some minutes creating a configuring all the necessary scaffold to make work a simple CRUD module, we are going to use the scaffold command to make all of this for us:

$ rails g scaffold Post title content:text

And then migrate to the database:

$ rails db:migrate

Now, we can visit in our browser 

localhost:3000/posts

We are not having any posts created yet, but we can proceed with the creation of one with our capybara test just running it with this:

$ rspec spec/features/posts_spec.rb

Your browser is going to be opened and the form filled out automatically

Now that our test has passed we can finally celebrate!

Just a final caution: make sure this happens only with your ruby on rails apps, otherwise, it is not Capybara who is poking around your websites.

And that's all for now people. I hope I’ve been helpful.