Upgrade Your JS Debugging In Capybara w/ Browser Extensions

Jun 6, 2018 · 3 min read

I’ve spent more time than I care to admit trying to hunt down JS errors in integration tests. Part of the reason this has been so hard for me in the past is that I didn’t have my usual debugging tools available, so I couldn’t use my normal development workflows.

When I‘m trying to get to the bottom of a JS issue in a request spec, I typically try to debug it by:

  1. Switch the test to use the Selenium
  2. Add a binding.pry in the spec
  3. Drop into the browser’s console and investigate 🕵️‍♂️

If there is a JS error this is usually easy enough to spot and debug in the browser‘s dev tools, but I often run into issues where the UI isn’t in the state I expect it to be in and I’m unable to reproduce in a click test. This is where I wish I had a handful of browser extensions to help with debugging.

Setting Up the React and Redux Developer Tools

While fighting a particularly perplexing spec failure a few months ago I decided enough is enough. I went on a mission to add the browser extensions I use in development to the instance of Chrome my tests are running in.

I did some digging and it was difficult to find much information on this, and what I did find was slightly out of date. It took some tinkering, but I was able to figure out how to get the React and Redux dev tools extensions installed and available in Chrome for all of our tests running in Selenium.

Getting .crx Files for Extensions

The Selenium Chrome webdriver has some facilities for adding extensions. Specifically, Selenium::WebDriver::Chrome::Options#add_extension will allow you to take a .crx file and load it into the browser it spins up.

Chrome can install .crx files to extend its functionality. This is what the Chrome App Store delivers when you install a browser extension, but it’s not straightforward to obtain these files from your installed extensions or from the app store for use in your specs. I ended up using http://crxextractor.com to download the .crx files for the extensions I wanted.

Just copy/paste the URL of the extension in the app store to get your .crx file.

Configuring Extensions

Once I had my extensions I needed to configure them. I was able to use Chrome webdriver's add_extension to do this.

Here is the update I made to our rails_helper.rb with the new config:

Now when I pop open the instance of Chrome Capybara is running our specs in I have the developer tools I’m accustomed to and can use the same workflows I normally would for hunting down issues in our client code!

Have any RSpec/Capybara testing tips of your own? Please share, I’d love to hear about them!

Chris Schmitz

Written by

Christian, husband, father and software engineer at Handshake.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade