Search code examples
rspecradio-buttoncapybara

Capybara Choose radio button not working / element click intercepted

I can't get rspec/capybara to click my radio button. There are many similar questions on SO, but I can't find the right answer for me.

My HTML/CSS is straight from the Bootstrap site:

<div class="form-group mb-3">
  <input autocomplete="off" checked="" class="btn-check" id="option1" name="options" type="radio">
  <label class="btn btn-secondary" for="option1">Vertrek</label>
  <input autocomplete="off" class="btn-check" id="option2" name="options" type="radio">
  <label class="btn btn-secondary" for="option2">Aankomst</label></div>

The test code (iteration #25 ;-( is

Capybara.default_driver = :selenium
visit "/route_goals/new"
element = page.find("#option1")
element.set(true)

(I have tried element.choose as well, but with the same result).

I get this error message:

   element click intercepted: Element <input autocomplete="off" checked="" class="btn-check" id="option1" name="options" type="radio"> is not clickable at point (295, 272). Other element would receive the click: <label class="btn btn-secondary" for="option1">...</label>

If I interpret that correctly, it says that the label intercepts the click for the radio button.

Solution

  • Do you happen to be running with Capybara.ignore_hidden_elements set to false? If you are - don't. It would have made it much clearer what's going on here.

    If you look at the actual page when rendered in your browser console you'll likely see that either the actual radio input element is hidden and replaced with an image for styling reasons, or that the label element is expanded to cover the radio input element (again for styling reasons). What that means is the user could never actually click on the input element, so Capybara won't be able to either. Instead you can tell choose to click the label via something like

    choose('option1', allow_label_click: true)

    which will click the checkbox if possible, otherwise click the associated label (could also be choose('Vertrek', allow_label_click: true) etc)

    Another option would be to specifically click the label directly via something like

    find(:label, for: 'option1').click

    or

    find(:label, 'Vertrek').click

    Note the label clicks will click whether or not the radio button is already selected - choose will only click if it's not already selected