Take the 2-minute tour ×

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">
            <input type="hidden" value="✓" name="utf8" />
            <input type="hidden" value="put" name="_method" />
        <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 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 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 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" />
        <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" />

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:


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

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)
share|improve this question
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 '13 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 '13 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 '13 at 4:51

1 Answer 1

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.

share|improve this answer
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 at 18:52

Your Answer


