---
title: 'Capybara Webkit 1.1.0: Screenshots and Better ClickFailed Debugging'
teaser:
tags: news,web,testing,capybara-webkit
author: Joe Ferris
published_on: 2013-12-12
---

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:

![ClickFailed](https://images.thoughtbot.com/capybara-webkit-1-1-0/click-failed.png)

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.

[bugfixes and improvements]: https://github.com/thoughtbot/capybara-webkit/blob/master/NEWS.md