I feel like I have tried everything, but I cannot select a checkbox in my application.
I have two checkboxes that look like this. One with 'cheese' and one with 'pickles'. they're auto generated with Rails form_with's = form.check_box
<input name="foods[]" type="hidden" value="0" autocomplete="off">
<input class="foodCheckbox" type="checkbox" value="cheese" name="food[]" id="food_cheese">
<a target="_blank" href="MyString">cheese</a>
Now to my testing. I have tried the following:
1.
check('food_cheese')
check('#food_cheese')
find("food_cheese").click
find("#food_cheese").click
find("food_cheese", visible: false).click
find("#food_cheese", visible: false).click
find(:css, "#food_cheese").set(true)
find(:css, "#food_cheese", visible: false).execute_script('this.checked = true')
The page finds the checkboxes. I cannot click the label because it is a link. When I do save_and_open nothing is selected. How do I select a checkbox?
You can use
find("#food_cheese").execute_script("this.click()")
or
page.execute_script("document.querySelector('#food_cheese').click()")
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I have the following spec:
within dom_id_selector(#boilerplate_copy) do
within '.copied_attributes_differing_from_original' do
within 'form.title[action="http://www.textdiff.com/"]' do
expect(page).to have_css 'button', text: 'Title'
expect(page).to have_css 'input[name="string1"]'
expect(page).to have_css 'input[name="string2"]'
end
end
end
Here is the HTML in question:
<div class="copied_attributes_differing_from_original">
<form action="http://www.textdiff.com/" class="title" method="post" target="_blank">
<input name="string1" type="hidden" value="Boilerplate Original test title">
<input name="string2" type="hidden" value="Boilerplate Copy test title">
<button type="submit">Title</button>
</form>
<form action="http://www.textdiff.com/" class="success_criterion_id" method="post" target="_blank">
<input name="string1" type="hidden">
<input name="string2" type="hidden" value="1">
<button type="submit">Success criterion</button>
</form>
// More of them...
<form action="http://www.textdiff.com/"...
</div>
While the first have_css passes (the button is found), the second have_css fails:
Failure/Error: expect(page).to have_css 'input[name="string1"]'
expected to find css "input[name=\"string1\"]" but there were no matches. Also found "", which matched the selector but not all filters.
But in my opinion this element definitely is there! I also don't understand the output Also found "", which matched the selector but not all filters., what does it mean?
Thank you.
By default Capybara doesn't find non-visible elements (which hidden inputs are) because a user can't see/interact with them. If you really need to check the presence of a non-visible element you can do
expect(page).to have_css('input[name="string1"]', visible: false)
That being said, since feature tests should be testing that the page functionality works rather than the details of exactly how it works you may not want to check for the presence of hidden inputs but rather just make sure the functionality they implement works.
I have a dynamically generated form that looks like this:
Do you like Pizza?
[ ] Yes [ ] No
The HTML looks like this:
<form>
<div class="field">
<label>Do you like Pizza?</label>
<input
type="radio" value="true"
id="reply_set_replies_attrs_0_pizza_true"
name="reply_set[replies_attrs][0][pizza]">
</input>
<label for="reply_set_replies_attrs_0_pizza_true">Yes<label>
<input
type="radio" value="false"
id="reply_set_replies_attrs_0_pizza_false"
name="reply_set[replies_attrs][0][pizza]">
</input>
<label for="reply_set_replies_attrs_0_pizza_false">No<label>
</div>
</form>
I'd like to get check those radio buttons with Capybara. How can I do this? I don't always know the ids of the radio buttons, because there's a few of them and when I also ask about Popcorn and Chicken I don't want to depend on knowing their order.
Is there a way to do something like...
field = find_label("Do you like pizza?").parent('field')
yes = field.find_label('Yes')
yes.click
?
Note that when using find, the :text option does a partial text match. Therefore, you could find the div directly:
find('div.field', :text => 'Do you like Pizza?').choose('Yes')
(Also using choose makes radio button selection easier.)
not bad!
label = find('label', :text => "Do you like Pizza?")
parent = label.find(:xpath, '..')
parent.find_field("Yes").click
Folks,
I am using watir-webdriver, I have a piece in my HTML DOM which gets generated on the fly when I enter some credentials, this piece has a bunch of checkboxes, the number of checkboxes vary, I have to select one checkbox, below is an example of this, here I want to select the second checkbox(the one that has value "BS" for the input type hidden but the value for input type checkbox is same for all):
<li class="dir">
<input type="checkbox" value="1" onclick="$(this).next('.should_destroy').value = (this.checked?0:1)" name="should_not_destroy">
<input class="should_destroy" type="hidden" value="1" name="import[dir_attributes][][should_destroy]">
<input type="hidden" value="" name="import[dir_attributes][][id]">
<input type="hidden" value="Automation" name="import[dir_attributes][][path]">
<span class="dir_mode">Include</span>
Automation
</li>
<li class="dir">
<input type="checkbox" value="1" onclick="$(this).next('.should_destroy').value = (this.checked?0:1)" name="should_not_destroy">
<input class="should_destroy" type="hidden" value="1" name="import[dir_attributes][][should_destroy]">
<input type="hidden" value="" name="import[dir_attributes][][id]">
<input type="hidden" value="BS" name="import[dir_attributes][][path]">
<span class="dir_mode">Include</span>
BS
</li>
I may be able to do this with XPATH, but wanted to try a non XPATH solution. The input type hidden has the appropriate value that I need, for example above the second checkbox has value "BS" for input type hidden. I tried to use the hidden method like this:
h = ##browser.hidden(:value, "BS")
h.select
But I dont know what to do after this. I am trying to select the checkbox based on the value of the hidden element. Any feedback is much appreciated.
I would suggest using the visible elements instead. I think it makes it easier to read the test and seems more stable.
Try:
##browser.li(:class => 'dir', :text => /BS/).checkbox.set
Here we go, I think this will do it
Since you have to select the checkbox based on the hidden, you're going to have to go up a level to the containing li, then drill down to the checkbox
#browser.hidden(value: 'BS').parent.checkboxes.first.set
Has anyone been able to get the jQuery UI Dialog buttons to respond to click_button or selenium.click? I can't seem to be able to get this to work.
Basically, I'm trying to test a form in a jQuery UI Dialog in a Rails app using Cucumber/Webrat/Selenium.
I have a page with many table rows, and each row on click fires off a dialog box with a form. Each form element has a unique id so the markup is valid.
Since the buttons can be created dynamically by the Dialog plugin, I initialize the dialog to add a 'Save' and 'Cancel' button. Interestingly, the plugin inserts a button tag, not an input tag. I also add ids on open as shown below, so the buttons can be targeted by the testing framework.
$('.inventory_dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
'Save': function() {
// ajax submit stuff
},
Cancel: function() {
// cancel stuff
}
},
open: function() {
// add ids to buttons for selenium
var inventory_id = $(this).attr('id').split('_').pop();
$('.ui-dialog-buttonpane')
.find('button:contains("Save")').attr('id', 'inventory_'+inventory_id+'_save_button')
.end()
.find('button:contains("Cancel")').attr('id', 'inventory_'+inventory_id+'_cancel_button');
}
});
The markup looks like:
<div id="inventory_dialog_392827" class="inventory_dialog">
<form action="/suppliers/22/listings/27738/inventory/392827" class="edit_inventory" id="edit_inventory_392827" method="post"><div style="margin:0;padding:0"><input name="_method" type="hidden" value="put" /></div>
<div class="input_block">
<label for="inventory_392827_new_quantity">Quantity</label>
<input id="inventory_392827_new_quantity" name="inventory[new_quantity]" type="text" value="10" />
</div>
<div class="input_block">
<label for="inventory_392827_claim_quantities">Groups of</label>
<input id="inventory_392827_claim_quantities" name="inventory[claim_quantities]" type="text" value="6-8" />
</div>
</form>
</div>
My Cucumber step (presently) looks like:
When /^I click the "(.+)" button in the inventory dialog$/ do |button_name|
debugger
selenium.click "//button[#id='inventory_#{#current_offer.id}_#{button_name.downcase}_button']"
selenium_wait
end
When I run Cucumber and it hits 'debugger', I am able to manually 'selenium.click' in the input fields.
selenium.click "//input[#id='inventory_392827_new_quantity']"
This successfully puts a cursor in that field. However, clicking the button does not work:
selenium.click "//button[#id='inventory_392827_save_button']"
When I type that in the command line debugger, it returns nil (which I believe is success, since there is no exception), but Firefox doesn't do anything. The dialog box stays open in the browser. When I output response.body, that button is present.
I also tried
click_button "inventory_392827_save_button"
but the 'selenium_wait' command times out which means it doesn't see that element.
I'm stuck...
Does the problem go away if you change it to "fireEvent ... click" or to clickAt?
It might be better to locate your button by another location strategy such as XPath or CSS. If you add the HTML of the button(s) then I'll try to give some suggestions.
If your target button has a class of 'submit' for example you could use:
css=input.submit
If the target button has a value of 'Click Me' you could use:
//input[#value='Click Me']
Another suggestion would be to use the id attribute without the unique number, so the following may work for you:
//input[substring(#id, string-length(#id) -11, 12) = '_save_button']
I had a similar problem, and here's how i got it done (using Capybara/Selenium/Factory_Girl).
The jQuery UI Dialog buttons generates this HTML, in my case with two buttons Add and Cancel:
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Add</span>
</button>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>
But the click_button method doesn't work because the actual button name is a span
nested inside the button tag, as you can see above.
So i wrote in the .feature step:
When I press the jquery dialog "Add" button
And i added this to my 'base.rb':
# jQuery Dialog buttons
When /^I press the jquery dialog "([^\"]*)" button$/ do |button_text|
page.find("div.ui-dialog-buttonpane").find('span', :text => button_text).click
end