Accidental Technologist

Musings about Entrepreneurship, Technology and Software Development

When You Can’t Check a Checkbox using Capybara

by Leave a Comment

In my last post I documented an issue I was having using Capybara on a client’s Ruby on Rails application with a ReactJS frontend.  I wanted to share another issue I came  across during my feature testing escapades.

The Problem

During my recent feature testing project I had a form which has a checkbox on it. The checkbox had a label with it. Did I mention this is a ReactJS frontend? I’m not sure if this is specific to ReactJS, but I suspect it isn’t. I think other frontend JavaScript frameworks may exhibit the same problem.

The Ruby code for my feature test is dead simple:

check “English”

That’s it. The test should run and when it finds the checkbox with a label of English, the checkbox should be checked. But, it doesn’t work. After many attempts at making this work and more Google searches than I can remember..I ended up at the Capybara mailing list.

The Solution

Thomas Walpole was kind enough to reply with his thoughts on the matter:

99.9% sure your checkbox isn’t actually visible on the screen.

What you’re describing as the “checkbox” is probably an image (probably added via CSS pseudo elements) being shown in place of the actual checkbox input element to ensure the same styling across different browsers.  If the checkbox has a label element correctly attached to it you can use `check(‘whatever’, allow_label_click: true)` – https://www.rubydoc.info/ github/jnicklas/capybara/ Capybara/Node/Actions#check- instance_method –  to tell Capybara to click the label element instead of the hidden checkbox input to toggle state.  If you don’t have an associated label then you’ll need to find whatever element is actually visible on the page and click it instead.

Changing my test to include this for the checkbox, worked perfectly.

check(“English", allow_label_click: true)

I hope someone finds this valuable and will save them some time and hair pulling.

Fixing StaleElementReferenceError When Using Capybara

by Leave a Comment

I’ve been spending an extended period of time lately writing Feature specs for a Ruby on Rails project using Capybara. Overall it’s been a fun project to work on but I had run into a few issues along the way. One in particular is the StaleElementReferenceError exception that get thrown when you are trying to find an element on your page that you know is there but Selenium can no longer find.

The error appears to be a timing issue between the page loaded in the browser, it being rendered and Capybara and Selenium trying to find the element. After much trial and error, along with many Google searches, I found no solutions that were reasonable. Even though many people had the same problem.

The solution was pretty simple actually. I added a rescue to my test and simply slept for 1 second and retry the failure. I admit, this seems like a hack but it works and that’s all I really cared about at the time. I see no ill effects from this, no measurable delay.

RSpec.feature "Listings", type: :feature, js: true do
  scenario "can edit common area - step 3" do
    begin
      post_a_space_step_1_with
      click_on 'Next'
      post_a_space_step_2_with
      click_on 'Next'
      click_on 'Edit Common Area'
      expect(page).to have_content "Step 1"
    rescue Selenium::WebDriver::Error::StaleElementReferenceError
      sleep 1
      retry
    end
  end
end

I’m certainly open to a better solution or an explanation as to why this might be bad. Please leave comments. Hopefully I help someone get around this really annoying problem.