DEV Community

Cover image for Capybara For Web Testing.
Hala Samir
Hala Samir

Posted on

Capybara For Web Testing.

What is Capybara?

Capybara is a Ruby library (also referred to as a gem) helps you test web applications by simulating how a real user would interact with your app.It has an intuitive API which mimics the language an actual user would use.
It switches the back-end your tests run against from fast headless mode to an actual browser with no changes to your tests.It has Powerful synchronization features mean you never have to manually wait for asynchronous processes to complete.

Capybara doesn't interact directly with the web application, it is just a layer between you and the web driver. So, you can use any of the other drivers that Capybara supports.

Capybara's drivers:

Capybara supports Selenium 3.5+ (Webdriver). In order to use Selenium, you'll need to install the selenium-webdriver gem, and add it to your Gemfile if you're using bundler.

Capybara Webkit is built around a cool library called QtWebkit, which is a headless browser acting as a server that listens for commands using a lightweight socket layer. So when you boot up your test suite, that server also starts in a background process. Our Ruby driver implements the Capybara API and communicates with that server.

Webkit is open source, powers Safari, Chrome, and other browsers. It’s fast and standards-compliant.

How to install Capybara?

Capybara requires Ruby 2.6.0 or later. To install, add this line to your Gemfile and run bundle install:

gem 'capybara'
Enter fullscreen mode Exit fullscreen mode

If the application that you are testing is a Rails app, add this line to your test helper file:

require 'capybara/rails'
Enter fullscreen mode Exit fullscreen mode

If the application that you are testing is a Rack app, but not Rails, set Capybara.app to your Rack app:

Capybara.app = MyRackApp
Enter fullscreen mode Exit fullscreen mode

If you need to test JavaScript, or if your app interacts with (or is located at) a remote URL, you will need to use a different driver. If using Rails 5.0+, but not using the Rails system tests from 5.1, you'll probably also want to swap the "server" used to launch your app to Puma in order to match Rails defaults.

Capybara.server = :puma # Until your setup is working
Capybara.server = :puma, { Silent: true } # To clean up your test output
Enter fullscreen mode Exit fullscreen mode

Using Capybara with RSpec:

Load RSpec 3.5+ support by adding the following line (typically to your spec_helper.rb file):

require 'capybara/rspec'
Enter fullscreen mode Exit fullscreen mode

The spec_helper file:

The spec_helper file contains the require block pulls the ruby gems from the Bundler application.
It also includes the Capybara DSL library we'll use to have Capybara interact with our test site, and Capybara RSpec, which sets up our test framework like drivers, max wait time or the base app URL.

The run command for a single file is:

bundle exec rspec spec/features/test_file_name_spec.rb
Enter fullscreen mode Exit fullscreen mode

Write a first test case by Capybara:

Enter the scenario name and the add the steps between do and end.

scenario 'the scenario name' do
  #---add the test steps here.
end
Enter fullscreen mode Exit fullscreen mode

Visit a new page:

To navigate to a special URL:

visit intended_page_path
Enter fullscreen mode Exit fullscreen mode

Perform on a page elements:

To select any element you can any selector like id, name, or element label

  • To click button use:
click_link('link_id')
click_link('link_text')
click_button('Save')
click_on('link_text') # clicks on either links or buttons
Enter fullscreen mode Exit fullscreen mode
  • To fill text field:
fill_in('First Name', with: 'name_value')
Enter fullscreen mode Exit fullscreen mode
  • To select from a drop down list use:
select('Option', from: 'Select_box')
Enter fullscreen mode Exit fullscreen mode
  • To check/uncheck a checkbox use:
check('checkbox')
uncheck('checkbox')
Enter fullscreen mode Exit fullscreen mode
  • To select a radio button use:
choose('radio_button')
Enter fullscreen mode Exit fullscreen mode
  • To attach a file it is preferred to add a file in the project path in a separate folder(module/package), attach_file can only accept id and name.:
attach_file('Image', '/path/to/image.jpg')
Enter fullscreen mode Exit fullscreen mode

Scoping
Capybara facilitates interacting with forms or clicking links and buttons, within a specific area of the page:

within(:xpath, ".//li[@id='employee']") do
  fill_in 'Name', with: 'Jimmy'
end
Enter fullscreen mode Exit fullscreen mode

Scripting
Capybara enables executing JavaScript:

page.execute_script("$('body').empty()")
Enter fullscreen mode Exit fullscreen mode

Querying
Capybara has a rich set of options for querying the page for the existence of certain elements like:

page.has_selector?(:xpath, './/xpath_of_element')
page.has_xpath?('.//xpath_of_element')
page.has_css?('css_selector')
page.has_content?('text')
Enter fullscreen mode Exit fullscreen mode

Also RSpec's matchers can be used:

expect(page).to have_selector(:xpath, './/table/tr')
expect(page).to have_xpath('.//table/tr')
expect(page).to have_css('table tr.foo')
expect(page).to have_content('foo')
Enter fullscreen mode Exit fullscreen mode

Conclusion:

Capybara is a common choice for end-to-end, acceptance, or integration testing in Rails applications.

It enables simulating a user actions on a web page and make assertions based on the content and environment of the page.

Discussion (0)