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: $ myApp cd 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 , .
  .
  .
  gem , , gem , , gem , , :development :test do 'rspec-rails' '~> 4.0' '>= 4.0.1' 'capybara' '~> 3.32' '>= 3.32.2' '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 Capybara::Selenium::Driver.new(app, ) Capybara.javascript_driver = :selenium_chrome do |app| browser: :chrome end :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: ENV[ ] = File.expand_path( , __dir_ )
abort( ) Rails.env.production? ActiveRecord::Migration.maintain_test_schema! ActiveRecord::PendingMigrationError => e
    puts e.to_s.strip
    exit Capybara.register_driver Capybara::Selenium::Driver.new(app, ) Capybara.javascript_driver = RSpec.configure config.fixture_path = config.use_transactional_fixtures = config.infer_spec_type_from_file_location!
  config.filter_rails_from_backtrace! require 'spec_helper' 'RAILS_ENV' || 'test' require '../config/environment' _ 'The Rails environment is running in production mode!' if require 'rspec/rails' require './spec/support/factory_bot' begin rescue 1 end :selenium_chrome do |app| browser: :chrome end :selenium_chrome do |config| " /spec/fixtures" #{ .root} : :Rails false 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: RSpec.describe Post, , describe it visit new_post_path
    
      fill_in , fill_in , click_button expect(page).to have_content require 'rails_helper' driver: :selenium_chrome js: true do 'the create posts process' do 'should create a post' do 'Title' with: 'Post title' 'Content' with: 'Post content' 'Create Post' 'Post was successfully created.' end end end The first line requires the existence of the file and imports it, then as described in the RSpec documentation use the RSpec.describe block to encapsulate the code for your test, it’s important to indicate the use of the specific driver, in this case, the driver. Also, we need to enable the JavaScript with because selenium sometimes has troubles without it. 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 , which is where are listed all the posts created in our app. 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! make sure this happens only with your ruby on rails apps, otherwise, it is not Capybara who is poking around your websites. Just a final caution: And that's all for now people. I hope I’ve been helpful.

Different

2021 - HackerNoon Contributor of the Year - RUBY-ON-RAILS

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How to Integrate Selenium with Capybara

Too Long; Didn't Read

Company Mentioned

@abdelp

RELATED STORIES