I want to select button inside the first div
Following is the code using
<div id="1">
<button class="button btcls bns" data-dismiss="modal">create</button>
</div>
I used following method to select that button'
xpath('//btcls').click
But no one is working
within("#1") do
click_button("create")
end
Related
I'm using iron-form and I'm trying to POST a file to a (currently local) server. I'm having two buttons, one to actually send the file and one to cancel. I'm having a problem cancelling. Here's the form:
<form is="iron-form" action="http://localhost:7733/receivedoc" id="restForm" method="post" >
<table class="starter-inputs">
<tr><td>
<px-file-upload
id="uploadComponentId"
message="Drag and drop files here, or click the button below."
multiple=false
accept=".xls,.xlsx">
</px-file-upload>
</td></tr>
</table>
<button class="btn btn--large btn--icon" id="saveDataSetButton">
<i class="fa-briefcase">Generate Pacing File</i>
</button>
<button class="btn btn--large btn--icon" id="cancelDataSetButton">
<i class="fa-briefcase">Cancel</i>
</button>
<div class="output"></div>
</form>
The cancelDataSetButton is being handled as:
this.$.cancelDataSetButton.addEventListener('click', function() {
console.log('restForm.cancelDataSetButton click')
restForm.reset();
restForm.querySelector('.output').innerHTML = 'Operation cancelled.';
});
HOWEVER, since By default, a native element (or input type="submit") will submit this form., the POST gets fired regardless. How can I prevent the Cancel button from POSTing?
it's a good question.
Couple things I would like to highlight here...
First of all, let's refresh some basics regarding HTML spec:
1) <button> without attribute type will act as type=submit as default attribute, that's why both of your buttons will submit the form.
2) <button> is supporting type="reset" which will reset all your fields into initial value(s) (e.g. clear them) and will not submit a form, so there are no JS handler code is needed for that at all.
In total, I would recommend to do some adjustments in your HTML code, related to buttons block:
<button type="submit" class="btn btn--large btn--icon" id="saveDataSetButton">
<i class="fa-briefcase">Generate Pacing File</i>
</button>
<button type="reset" class="btn btn--large btn--icon" id="cancelDataSetButton">
<i class="fa-briefcase">Cancel</i>
</button>
Please make note, that for cancelDataSetButton no JS code is needed (to clear the field), and you could delete whole event listener:
this.$.cancelDataSetButton.addEventListener('click', function() {
and so one.
Some references to catch up:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
There are multiple similar kind classes and buttons but I was trying to click on a button which is inside a particular class by using code
within(first(locator, text: text))do
scroll_to(first('button'))
first('button').click
end
from
<div class="some parent class">
<div class="some other class" id="1">
<div class="class1">......</div>
<div class="class2">......</div>
<div class="class of button">......</div>
</div>
<div class="class used inside within" id="2">
<div class="class1">......</div>
<div class="class2">......</div>
<div class="class of button">......</div>
</div>
</div>
But when I run my above code then it clicks similar kind of button which is inside the class some other class and not used inside within. Any suggestion what should I do to make it work.
Also to check I have run first(locator, text: text) and path of found element is for the path of class <div class="class used inside within" id="1">
Ok I get it working. Infact i was using page.execute_script("$('button').click()") to click on the button in my code which seems to be not restricted to particular class by using within. But now i clicked with pure capybara code without script and it clicks on correct button now
I am writing the test automaton code for a system and the dev team presented me the following html:
<div id="someId">
<div class="classA">
<button class="classB">
</div>
<div class="classA">
<button class="classB">
</div>
</div>
Now the question is: Is it possible to click exclusively on the SECOND button? If so - how?
If I understand you right, you're click on links styled as buttons. You can use this step definition
Then(/^I click the (\d+) instance of link "(.*?)"$/) do |instance, link|
page.all('a', :text => "#{link}")[instance.to_i - 1].click
end
I would not rely on the order of elements returned by all. I remember running into issues with it in the past, see e.g. this issue. Instead I'd use a selector, something like this:
find("#someId div.classA:nth-child(1) button.classB").click
(IIRC they are zero-indexed)
this is my view code where i have make multiple 'a' tag and want to test third element from li. and we can uniquely identified with offer id as per below code ...
<div class="search_data_outer_div">
<ul>
<li class="small_preview">
<div class="image_area">
<a href="/offer/show/334">
</div>
<span>
<span class="artist_name">Artist 1</span>
<span class="remaining_time">Remaining Time: 7 days</span>
<i id="334" class="icon-remove pointer" style="position:absolute;right:0;display:none;"></i>
</span>
</li>
and i have tried make one step defination ... it is working fine with cucumber but when execute with selenium (WebDriver) then page not open after click.
Scenario:
When I press third offer
Then I should see "YOUR OFFER"
and its step defination file
When /^I press third offer$/ do
page.execute_script %Q{ $(".search_data_outer_div ul li .image_area a").eq(2).click(); }
end
let me know right solution if anybody can help
thanks
IIRC CSS style selectors have issues with some version of Web Driver. Ideally you'd have PageObject variables set up for this so you're not using raw webdriver code in your steps but something like this should work:
browser.div( :class => 'search_data_outer_div').div( :class => 'image_area').links.first.click
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