2

I'm having trouble getting Cucumber to "choose" a radio button and hoping someone can give me a sanity check. Without quoting a huge mass of HTML junk, here's the relevant portion (which I collected from print.html). It's within a modal div that is activated by a button. I can "click" that button and see the modal window appear (I'm running it as a @javascript scenario in Selenium).

<div class="modal-body pagination-centered">
    <img src="/assets/payment.png" alt="Payment" />
    <form novalidate="novalidate" method="post" id="edit_cart_1" class="simple_form edit_cart" action="/carts/complete" accept-charset="UTF-8">
        <div style="margin:0;padding:0;display:inline">
            <input type="hidden" value="✓" name="utf8" />
            <input type="hidden" value="put" name="_method" />
        </div>
        <div class="control-group hidden cart_property_id">
            <div class="controls">
                <input type="hidden" name="cart[property_id]" id="cart_property_id" class="hidden" />
            </div>
        </div>
        <div id="payment_fat_buttons" class="fat-buttons">
            <div class="vertical-button-wrapper">
                <input type="radio" value="cash" name="cart[payment_type]" id="cart_payment_type_cash_pay" data-property-id="1" />
                <label for="cart_payment_type_cash_pay">Cash</label>
            </div>
            <div class="vertical-button-wrapper">
                <input type="radio" value="credit" name="cart[payment_type]" id="cart_payment_type_credit_pay" data-property-id="1" />
                <label for="cart_payment_type_credit_pay">Credit</label>
            </div>
        </div>
        <div style="display: none;" id="cart_room_number_area_pay">
            <div class="control-group string optional cart_room_number">
                <label for="cart_room_number_pay" class="string optional control-label">Room number</label>
                <div class="controls">
                    <input type="text" value="" size="50" name="cart[room_number]" id="cart_room_number_pay" class="string optional" />
                </div>
            </div>
        </div>
        <input type="checkbox" value="1" style="display: none;" name="receipt" id="receipt" />
        <div class="sell-modal-footer">
            <input type="submit" value="Complete With Receipt" name="commit" id="cart_complete_with_receipt" data_disable_with="Processing..." class="btn btn-danger" />
            <input type="submit" value="Complete Sale" name="commit" data_disable_with="Processing..." class="btn btn-danger" />
        </div>
    </form>
</div>

I've tried as many different equivalent ways of getting at it that I can think of. Most obviously just by the label, or the ID, like:

choose 'cart_payment_type_cash_pay'
choose 'Cash'

which just gives me the error:

Unable to find radio button "cart_payment_type_cash_pay" (Capybara::ElementNotFound)

I thought it might have something to do with the modal dialog, visibility, etc. but I introduced the ID #payment_fat_buttons just for testing, and when I look for it like this:

find('#payment_fat_buttons').choose('Cash')

it finds that DIV OK, but still not the radio button. I also tried getting at it with :xpath on the whole page, and within a scope like:

within(:xpath, "//div[@id='payment_methods']") do
  find(:xpath, ".//input[@id='cart_payment_type_cash_pay']").choose
end

which acts like it can also find the outer DIV, but not the radio button - I get the error:

Unable to find xpath ".//input[@id='cart_payment_type_cash_pay']" (Capybara::ElementNotFound)

Generally, it seems like I can find any arbitrary element around the radio buttons with :xpath or CSS expressions, just not the radio buttons. I can also push the submit buttons on the form without any problem. I tried dropping the data attributes as a test - no difference. Any help would be greatly appreciated. This is driving me nuts because it seems so simple, and yet I'm getting nowhere. I need to choose that for a big segment of Scenarios, so if I can't figure it out, I'll have to resort to something hokey and horrible. Many thanks in advance...

Relevant versions from Gemfile.lock:

rails (3.2.13)
cucumber (1.3.8)
gherkin (2.12.2)
cucumber-rails (1.4.0)
capybara (2.1.0)
selenium-webdriver (2.35.1)
3
  • 1
    this is what i do when i am stuck with capybara: add a binding.pry just before the failing expectation. execute current_url in the session, open the browser at that url, inspect in the browser console what is going on.
    – phoet
    Oct 15, 2013 at 16:03
  • That's pretty neat. It seems to give me the same thing I get from print.html though. So still stumped. But I'm adding that to my bag of tricks. Thanks.
    – Steve
    Oct 18, 2013 at 4:12
  • I was running Firefox 18 because I'd had some problems with FF and Selenium with FF versions in the early 20's. Just updated to FF 25, and it works OK now - but no change as far as finding those specific elements.
    – Steve
    Oct 18, 2013 at 4:51

1 Answer 1

7

I finally figured this one out. Capybara wasn't finding the radio button because buried deep in my styles was some CSS that hid it in order to change the appearance. Once I realized that, I figured out that I could side-step the whole issue of finding the radio button by just doing a click on the label instead:

find(:xpath, "//label[@for='the_radio_button_id']").click

I didn't realize it was possible to get at radio buttons that way - but in any case, it solves the issue of how to click a radio button that Capybara won't find due to styling or other issues. Hope that helps someone else.

3
  • Tricky! I got caught by the same thing. It would be lovely if Capybara could detect that a element could not be found because it was hidden.
    – LisaD
    Feb 11, 2014 at 18:52
  • Thank you so much this saved me big time Apr 9, 2016 at 1:13
  • 1
    capybara can find hidden elements, you just have to specify it - for example page.find(".some-hidden-form", visible: false) will find the element that has display: none Dec 28, 2020 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.