I have some HTML for a Checkbox im trying to click:
<td class="surface center">
<div class="checkbox-inline checkbox-inline--empty">
<input type="hidden" value="0" name="stuff_check">
<input id="stuff_1" class="boolean optional" type="checkbox" name="stuff_1_checked" value="1" data-item="5">
<label class="optional" for="stuff_1">Checked</label>
</div>
</td>
When running a page.find_by_id('id').trigger('click') it does indeed work, just using click however it complains about Poltergeist possibly clicking another elements:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [-9468.5, 6] failed. Poltergeist detected another element with CSS selector '' at this position. It may
be overlapping the element you are trying to interact with. If you
don't care about overlapping elements, try using
node.trigger('click').
However I felt maybe this is because of it being set as "hidden", so I tried doing page.find_by_id('ID', :visible => false).click however it gave the same issue.
Any suggestions? Since I know using trigger.('click') isn't advised.
There is no way to do a proper click on a hidden element because there would be no way for a user to click on an element that doesn't appear on the screen.
Your example is confusing because the hidden element doesn't have the same name attribute as the checkbox element which is what I would normally expect in this kind of setup. Assuming that what you're really trying to do is check the "stuff_1" checkbox (and that is hidden via CSS) then you should be doing what a user of your app would have to do - click on the label.
page.find('label[for="stuff1"]').click
Try
within('.checkbox-inline checkbox-inline--empty') do
check('#stuff_1')
end
I really recommend using Pry to do this though as you'll save yourself a ton of pain finding which elements are where.
Related
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
If you've ever looked at what ASP.NET MVC actually renders when you use #Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".
Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)
My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?
Screen readers will ignore hidden inputs.
Given the example you cite in your comment, it returns this code:
<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
<label>Home Club Newsletter</label>
<input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
<input name="JoinHomeClub" type="hidden" value="false">
<span class="checkbox-label">Yes, please sign me Up!</span>
</div>
Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.
When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.
But to your question…
Your question was related to the <input type="hidden">. As #SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).
I cannot get Capybara for find a checkbox element.
I've tried all the usual ways:
find_field
check
find
click_on
It's as if the element isn't there. If I select the parent element, and look at it's innerHTML the checkbox is included:
(byebug) all(:css, '.checkbox.form-group').last['innerHTML']
\n <input type=\"checkbox\" id=\"google_agreed_to_terms_at\" value=\"1\" required=\"true\" ng-model=\"agreed_to_terms\" required-notification=\"Please agree to the terms and conditions\" class=\"ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required\" bs-validation=\"\">\
but selecting the child elements it's not there:
(byebug) all(:css, '.checkbox.form-group').last.all :xpath, './*'
[#<Capybara::Node::Element tag="label"
path="//HTML[1]/BODY[1]/DIV[2]/DIV[1]/DIV[2]/FORM[1]/DIV[1]/LABEL[1]">]
I feel like I'm going mad.
Here's the relevant code (copied from save_and_open_page)
<div class="checkbox form-group">
<input type="checkbox" id="agreed_to_terms_at" value="1" required="true" ng-model="agreed_to_terms" required-notification="Please agree to the terms and conditions" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" bs-validation="">
<label class="label-light" for="agreed_to_terms_at">
I have read and agree to the terms</label>
</div>
I thought maybe rails was generating slightly non-compliant HTML, so I've gone to writing the checkbox by hand, but it didn't help.
What's going on here?
The checkbox is hidden to allow for uniform styling across all browsers. Since you have a label element correctly associated you can tell check to click the label instead of the actual checkbox
check('agreed_to_terms_at', allow_label_click: true)
which will click the checkbox if visible and if not it will click the label. If you want it to only click the label you can do
find(:label, 'I have read and agree').click
Or
find(:label, for:'agreed_to_terms_at').click
Due to CSS styling, the checkbox element was being hidden and the label used to present it. So the element was getting skipped over by capybara's default behaviour to ignore hidden elements.
I worked around it using
find('#agreed_to_terms_at', :visible => false).trigger('click')
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>