2

I have a set of radio buttons using bootstrap and want to use Capybara to select them using either id or value. For my rspec tests. For some reason it's not seeing the radio buttons and I wonder if anyone can have a look and suggest something.

Error I'm getting is

Capybara::ElementNotFound: Unable to find visible radio button "paper" that is not disabled Capybara::ElementNotFound: Unable to find visible radio button "#paper" that is not disabled

HTML` 

        </label>
        <label for="paper" id="paper" class="btn btn-primary choice col-lg-4 col-md-4">
          <input type="radio" value = "paper" name="rps" id="paper">
          <img class="card-img-top img-fluid image-responsive" src="/img/paper.png" alt="Paper">
          </input>

        </label>
        <label for="scissors" class="btn btn-primary choice col-lg-4 col-md-4">
          <input type="radio" value = "scissors" name="rps" id="scissors">
          <img class="card-img-top img-fluid image-responsive" src="/img/scissors.png" alt="Scissors">
          </input>

        </label>
      </div>`

TEST

 feature 'Testing if we divert to /result chosing an option and play' do
  scenario 'Choose option and click play' do
    sign_in_and_play
    click_button('Play')
    choose("#paper")
    # choose("paper")
    expect(page).to have_content("Result displayed here")
  end
end

Any help would be much appreciated. Thanks

I Durrani
  • 81
  • 1
  • 5

1 Answers1

6

Capybara is telling you it can't find the radio buttons because they aren't actually visible on the page. Most likely, if you inspect the page you'll see that bootstrap is hiding the actual radio buttons (probably with visibility: hidden CSS) and replacing them with images so the styling is consistent across browsers. One solution to this is to allow Capybara to click on the label rather than needing to click specifically on the radio button:

choose('scissors', allow_label_click: true)

You can also default to allowing label clicks by setting Capybara.automatic_label_click = true

Note: your sample HTML is illegal since both the paper label and input have id="paper" - I'm assuming that is meant to be like the "scissors" option where the id is only on the input.

user664833
  • 18,397
  • 19
  • 91
  • 140
Thomas Walpole
  • 48,548
  • 5
  • 64
  • 78
  • Thank you. label wasn't supposed to have id, I was playing around to get it clicked. Thanks for pointing that out. As far as the original issue is concerned, it's still the same, still getting the same error telling me it can't find the radio button 'scissors'. – I Durrani Mar 11 '18 at 21:57
  • It's actually still trying to click the radio button which his obviously hidden for styling. I have tried giving label a unique id and tested with find('#paper_label').click and that doesn't work either Get error: Unable to find visible css "#paper_label" Another thing I've tried was find('[for=paper]').click Got error: Unable to find visible css "[for=paper]" not sure if there's anything else I can try – I Durrani Mar 11 '18 at 22:29
  • @IDurrani What is the actual HTML while the page is live in a browser, and do you really mean for the img to be inside the input or should the input be closed and the img be a sibling included in the label? – Thomas Walpole Mar 12 '18 at 01:21
  • Thanks Thomas. Yeah well since i'm at early stage or all this, I thought it was a good idea. HTML after page loaded is below. – I Durrani Mar 12 '18 at 11:19
  • Ok just realised that one of my was commented out somehow. Uncommenting that fixed it. Thank you so much. – I Durrani Mar 12 '18 at 11:39
  • `Capybara.automatic_label_click = true` was all to get my system tests to pass again, thanks! – cseelus Mar 15 '18 at 19:16