I have a set of radio buttons that reveal more options on a page when they are clicked. Here is the set of radio buttons...
<div class="field">
Single
<input id="selection_single" type="radio" value="single" name="selection" checked="checked">
Repeating Dates
<input id="selection_repeating" type="radio" value="repeating" name="selection">
</div>
I am trying to click the 2nd button w/id selection_repeating. In my spec file I have choose("selection_repeating"), but am getting an error when running the script saying Unable to find radio button "selection_repeating". Any ideas?
Related
I have this problem: In a form, I want to display the info from a box (idCreditorCnpCui) only if the second or the third option is selected from the form (if "P" or "O" option is selected). While I select any of these options, the box appears as it should. The problem I encountered is that when I press the "sent" button (with O or P option), the idCreditorCnpCui box disappears from the view.
This is the HTML with the options of the form:
<div class="form-field">
<label for="payment.creditorOrganizationOrPerson"><localization:localize key="creditorOrganizationOrPerson.label"/></label>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="N" onclick="display();" /> N <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="P" onclick="display();" /> P <br>
</div>
<div class="form-field-element">
<input type="radio" property="payment.creditorOrganizationOrPerson" value="O" onclick="display();" /> O
</div>
</div>
This is the box I want to be display or no according the option selected:
<div class="form-field" id="idCreditorCnpCui" style="display:none">
<label for="payment.creditorCnpCui"><localization:localize key="creditorCnpCui.label"/></label>
<div class="form-field-element">
<input type="text" property="payment.creditorCnpCui" size="36" maxlength="35" styleClass="input-field" styleId="payment.creditorCnpCui"/>
</div>
And this is the js
function display(toDisplay,idDiv){
if(toDisplay == false){
document.getElementById(idDiv).style.display = "none";
}else{
document.getElementById(idDiv).style.display = "block";
}
}
display(false,"idCreditorCnpCui");
If I turn the final line to "display(true, "idCreditorCnpCui"), the box appear even when the option "N" is selected by default. That should not happen since the N option means the idCreditorCnpCui box is hidden. Any idea please.
I want a field to be display just if an option is selected. But when I send the form, the field disappears even when the option that display that field is selected
I am trying to click on a button on a website using VBA Selenium via Chrome.
When I use VBA code to click the button, ElementNotVisibleError pops up:
VBA code:
Set CD = New Selenium.ChromeDriver
CD.Start
CD.Get Url
Application.Wait (Now + TimeValue("0:00:05"))
CD.FindElementByCss(".inline_cancel").Click
When I move the mouse to the place where button is, the button appears and HTML code style display changes to block and before it was none.
When set to "none" VBA cannot find the element.
When set to "block" VBA can detect the element.
HTML code:
<span class="edit-hover" style="display: none;"><input type="hidden" name="field_root_name" id="order_header_change_attachments_attributes__field_name" value="order_header_change[attachments_attributes][]" class="field_root_name"><input type="hidden" value="365995938" name="order_header_change[attachments_attributes][365995938][id]" id="order_header_change_attachments_attributes_365995938_id"><input value="false" class="delete-field" type="hidden" name="order_header_change[attachments_attributes][365995938][_delete]" id="order_header_change_attachments_attributes_365995938__delete"><span class="intent-field"><span class="attachment-intent-checkbox"><input name="order_header_change[attachments_attributes][365995938][intent]" type="hidden" value="Internal"><input class="intent_checkbox_field" id="attachment_365995938_intent" type="checkbox" value="Supplier" name="order_header_change[attachments_attributes][365995938][intent]">→ <label for="attachment_365995938_intent">Supplier</label></span></span><a aria-label="Delete Attachment" class="inline_cancel" href="javascript:void(0);" role="button" tabindex="0"> </a></span>
You saw it right. Clearly the desired element:
<a aria-label="Delete Attachment" class="inline_cancel" href="javascript:void(0);" role="button" tabindex="0"> </a>
have the ancestor <span> with attribute style="display: none;"
<span class="edit-hover" style="display: none;">
which implies the element is hidden i.e. either not visible or not enabled.
To click on the element you have make the desired element clickable by taking some actions on some other element first.
I have a form with a radio-button group:
<form name="search" class="form-inline" asp-controller="controller" asp-action="action" method="get">
<div class="btn-group" data-toggle="buttons">
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("AM")" onclick="document.search.submit()">
<input type="radio" name="time" value="am" autocomplete="off">AM
</label>
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("PM")" onclick="document.search.submit()">
<input type="radio" name="time" value="pm" autocomplete="off">PM
</label>
</div>
</form>
#ActiveTime:
public string ActiveTime(string time)
{
if (ViewData["time"].ToString() == time) { return "active"; }
return "";
}
Relevant section of controller\action:
string time = ( (String.IsNullOrEmpty(HttpContext.Request.Query["time"].ToString())) ? "am" : HttpContext.Request.Query["time"].ToString() ).ToUpper();
ViewData["time"] = time;
Clicking the AM or PM label will submit the form, but doesn't include the radio button's value. What am I missing?
It is not sending the value of the radio button because when user clicks on the label, the browsers javascript engine will execute the onclick event handler you wired up on that element. Your current handler will execute this code document.search.submit() which submits the form immediately, even before bootstrap library could adjust the radio button state.
You can solve the issue by hijacking the click handler and set the radio button value yourself and then submit the form (all in javascript).
Another option i would try is, to remove the form submit behavior from the radio button selection/click event. What if user want to change his selection ? I would create a separate "Submit" button for the form submission.
I also noticed you have onclick handler registered two times on your element. clean that up.
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)
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.
From the following html how can i choose the second radio button .In the page load first radio button is selected when i use the following code
page.choose('#PPRINT')
<div id="printOpns" class="span6">
<div class="row"> <div class="span2" align="center">
<input id="Print" class="radio" type="radio" checked="" value="EPrint" name="printO"></div>
</div>
<div class="row"><div class="span2" align="center">
<input id="PPRINT" class="radio" type="radio" value="FPrint" name="printO">
</div>
</div>
</div>
The Capybara API for the choose method says "Find a radio button and mark it as checked. The radio button can be found via name, id or label text." This means that the text that is supplied to the choose method must match the name, id or label of the radio button.
choose does not support css-selectors. Therefore, when you do:
page.choose('#PPRINT')
Capybara is looking for a name, id or label that equals "#PPRINT".
You want to do (ie no "#"):
page.choose('PPRINT')