Capybara Webkit 1.1.0: Screenshots and Better ClickFailed Debugging

Capybara Webkit 1.1.0 has been released and it contains some great new features like screenshots and better ClickFailed debugging.

ClickFailed

You’re writing a nice little Capybara spec, and you innocently try to click on something using Capybara that you can see plainly in your browser:

click_on 'Sign Up'

You’re SURE this should work, but Capybara gets sassy:

Failed to click element /html/body/div[1]/button[2] (Capybara::Webkit::ClickFailed)

Introducing Capybara Webkit 1.1.0: ClickSuccess edition

These ClickFailed errors are pretty frustrating, and unfortunately there’s no easy fix. These errors occur when your Capybara driver tries to click on an element, but it can’t find the element or finds a different element where it expects the target element to be.

Although we haven’t come up with a definitive fix for these issues, Capybara Webkit includes several changes that will help you to work through them. Let’s run through the above scenario again, this time using the latest release of Capybara Webkit.

First, you attempt to click on the element:

click_on 'Sign Up'

You’ll still get a ClickFailed error, but this time the error message is much more helpful:

Failed to click element /html/body/div[1]/button[2] because of overlapping
element /html/body/div[@id='myModal']/div/div/div[2] at position 191, 121;
(Capybara::Webkit::ClickFailed)

Hey now, that’s interesting! There’s some div tag with an ID of myModal where you expect your button to be? That’s something you can work with.

But wait! There’s more!

Screenshots

You’ll also see a line like this:

A screenshot of the page at the time of the failure has been written to
/var/folders/5c/h1zzj9wx70n4y1qcvnzy2h8h0000gn/T/click_failed_C10849.png

If you pop open this file, you’ll get to clearly see what Capybara Webkit did when you were trying to click on that button:

There’s even a beautiful mouse cursor illustrating the exact location you attempted to click.

Updating

If you’re using Capybara Webkit 1.0.0, you can update easily.

Edit your Gemfile:

gem 'capybara-webkit', '~> 1.1.0'

Update your bundle:

% bundle update capybara-webkit

And you’re good to go!

We also included a handful of other bugfixes and improvements in this release.

Props go out to Austen Ito, Jon Rowe, Kazuhiro Nishiyama, Kirill Nikitin, Kohei Suzuki, and Matthew Horan for helping out with this release.