Need a way to debug your work? Capybara has a built-in way to save screenshots.
Going to the GitHub site for Capybara, under the DSL there's a section marked debugging.
We'll go over two ways you can start debugging:
save_and_open page and
As it says in the documentation, screenshots will automatically default to a temp directory:
To see a code example, let's go to our TAU Capybara demo project that I've created and drill down into advanced topics. Let's go into debugging with save and open.
For this project, we're going to need the Capybara Ruby gem in order to have access to the built-in Capybara commands, the RSpec test framework, Selenium WebDriver, and another gem called Launchy.
To find out more about this gem, we go to rubygems.org and search for “Launchy”.
As you can see, Launchy is a pretty old program back in 2014. Launchy will allow us to open both pages in screenshots after we've saved them.
To install, copy the gemfile to the clipboard, and paste it into your gemfile.
source 'https://rubygems.org' gem 'capybara', '~> 3.13', '>= 3.13.2' # Released: January 24, 2019 gem 'rspec', '~> 3.8' # Released: August 4, 2018 gem 'selenium-webdriver', '~> 3.141' # Released: November 1, 2018 gem 'launchy', '~> 2.4', '>= 2.4.3' # Released November 3, 2014
Going into our
spec_helper, you can see it's much like our other projects where we're requiring bundler to install dependencies and execute the RSpec tests.
require 'bundler' require 'capybara/dsl' require 'capybara/rspec' Bundler.setup(:default) Bundler.require Capybara.default_driver = :selenium_chrome Capybara.app_host = 'https://the-internet.herokuapp.com' Capybara.default_max_wait_time = 10 # Set the save directory. Capybara.save_path = 'tmp/capybara' RSpec.configure do |config| config.formatter = :documentation end
We're requiring Capybara DSL to have access to the built-in Capybara methods. We're including Capybara RSpec in order to set up our test framework. Let's have our default driver be Selenium Chrome. Our
app_host, we're going to _the_internet. _
But the one difference that we have is we're setting up the
save_path for the screenshots to be
Our test will be very simple — checking that the save and open page works.
feature 'Debugging' do background do visit '/' end scenario 'save_and_open_page' do save_and_open_page end end
feature we're testing is “Debugging”, going to the main page, and we're checking the save and open functionality.
save_and_open_page you can place this command anywhere in order to check that the page looks the way you expect it to when you're debugging.
Let's kick off the test.
In our project, you can see there's 2 categories: intro and advanced topics.
Going into advanced topics:
We're going to look for debugging with save and open; let's change directory to that:
bundle to execute our RSpec tests in the spec features folder. We're going to be running the save and open page specification we were just looking at:
bundle exec rspec spec/features/save_and_open_page_spec.rb
Our test passed!
We ran the debugging scenario, which saved and opened the page.
We can see a new temp folder has been created with a Capybara sub-folder, which contains a copy of the page we were looking at, the saved copy of all the HTML of the page.
It also saved and opened an un-styled version of the page.
This is the live versions of the page with all the style sheets intact.
And this is the saved page without the style sheets active.
If, say, a web element was missing at that time, we'd be able to review this page and find the error.
Now let's go into save and open screenshot.
Let's say we come across an error which we can't seem to reproduce. By placing anywhere in our Capybara framework —
save_and_open_screenshot — we can save a screenshot and have it open to take a look at it.
Example Test with Capybara + RSpec – save_and_open_screenshot_spec.rb
feature 'Debugging' do background do visit '/' end scenario 'save_and_open_screenshot' do save_and_open_screenshot end end
All of this is because of the Launchy gem, which I can use for Capybara testing.
Here in our advanced topics directory, we're going to change the directory back to:
And we're going to run bundler to execute the RSpec test for save and open screenshot:
bundle exec rspec spec/features/save_and_open_screenshot_spec.rb
And here we can see in the temp Capybara folder of our project, we have the page saved as a PNG file.
It assumed the test was run, the screenshot opened.
save_and_open page and
save_and_open_screenshot are very good with debugging problems which don't always occur.
Sometimes tests go by so fast it's very hard to see what's actually happening on the page. With these two commands, you can take a snapshot of exactly what is happening. If there is any error messages, if there is any web elements that are supposed to be appearing that aren't appearing, those two commands are very good for debugging purposes.
:::tip Quiz The quiz for this chapter can be found in section 7.4 :::