I was wondering how to click on a input in capybara.
So far I've tried
click_on('#js-emu-submit.button.pl3.pr3.mb0.mr1')
click('js-emu-submit')
find('input', exact_text: 'Get an Estimate', match: :first).click
None of them have worked
This is the HTML from the webpage.
<input type="submit" name="commit" value="Get an Estimate" id="js-emu-submit" class="button pl3 pr3 mb0 mr1" data-disable-with="Get an Estimate">
I am just wondering how to click on the item.
Looking at the docs for click_on - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_link_or_button-instance_method - you can see that it's a combination of click_button and click_link and says to check each of those for the type of locator it accepts. Looking at click_button, https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#click_button-instance_method, you can see that it will find any <input> element of type submit, reset, image, button (which your HTML element is) and that the locator can be any of id, Capybara.test_id attribute, value, or title. A CSS selector is not one of those things so that explains why your click_on attempt fails. Assuming your <input> element is visible on the page then any of the following should click it
click_on 'js-emu-submit' # match on id
click_button 'js-emu-submit' # id
click_button 'Get an Estimate' # match on value - should work with `click_on` too
The other option is to just use click on an element located another way. click does not take a locator - https://www.rubydoc.info/gems/capybara/Capybara/Node/Element#click-instance_method - so that explains why your second attempt doesn't work, and an input element doesn't have child text inside the element so that explains why your third attempt doesn't work. Things that should work using click would be
find('#js-emu-submit').click # find element by CSS id selector and click it
find(:button, 'js-emu-submit').click # find by id using the :button selector
find('input[value="Get an Estimate"]').click # find by CSS attribute selector
...
Related
I am using headless chrome, rspec - 3.6.0, capybara - 2.15.1
select('apple',from: 'fruits', visible: false)
page.find('#apple', visible: false).click
within 'results' do
page.find('.option', text: 'apple').click
end
Error:
Capybara::ElementNotFound: Unable to find visible css "#fruits .chosen-drop .chosen-results"
The error shown in your question is not from any of the other lines of code you show, however based on the error message it's pretty clear what's going on.
Attempting to perform any action on an element you've found using visible: false makes no sense because the user can't interact with a non-visible element (99% of time if you specify visible: false you're doing something wrong). In the current case you are using the chosen library which hides the normal HTML <select> element and replaces it with a JS driven widget made up of <ul> and <li> elements. Because of this you can't use the normal select method and instead need to interact with the page just like a normal user would (click on the 'chosen' field and then click on the element from the list). You haven't provided the actual HTML generated for your page, but based on your attempts and the output generated by the chosen demo page - https://harvesthq.github.io/chosen/ - it will be something like
<select id="fruits" ... style="display: none;>
...
</select>
<div class="chosen-container" ... >
...
<div class="chosen-drop">
...
<ul class="chosen-results">
<li ...>Apple</li>
<li ...>Orange</li>
...
</ul>
</div>
</div>
So to work with that the user would first need to click on the .chosen-conatiner element (sibling of the hidden select) to open the .chosen-drop element and then click on the correct <li> from the .chosen-results element which translates into something like
chosen_container = find('select#fruits + .chosen-container').click
chosen_container.find('.chosen-results li', exact_text: 'Apple').click
If that doesn't work for you then you'll need to add the exact HTML from your live page to your question.
Note: if you're dealing with a lot of chosen widgets in your site you may want to look into writing custom Capybara selectors -https://www.rubydoc.info/github/teamcapybara/capybara/Capybara#add_selector-class_method - to make the tests read a lot better
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I am trying to click a button within a table on a webpage within IE, the source of the button shows:
<input type="image" src="img/testimg.png" onclick="picture_return(this,'92b84574a336a090618f151b6fc821cf:5','http://testwebpage.com/in/834');" value="Test Web Button">
This is a part of a large table with multiple <td> within the source, this is within another table which is then within the following class:
<div class="section_client_dnBox">
I tried to go through a few of the items within the class by using the following VBA code:
IE.Document.getElementsByClassName("section_client_dnBox")(0).Click
However, had no luck as (0) didn't press anything and anything larger ie, (1) gave me an error. So my question now is basically, is there any way of clicking the button using something simple such as reffering to it's value within the table (value="Test Web Button")?
From my experience, you need to look at the tag name rather than the class name. This is an example of the code I generally use when finding buttons.
For Each MyHTML_Element In document.getElementsByTagName("input")
If MyHTML_Element.Type = "submit" Then
MyHTML_Element.Click: Exit For
End If
Next
You might be able to change the . type to = "image". I too am just learning how to use IE automation in VBA so I am not a champ at it either. I hope that helps.
CSS selector:
It is far simpler to use a CSS selector of input[value='Test Web Button']. No loop required.
It says get element with input tag having attribute value having value = 'Test Web Button'. "[]" means attribute.
.querySelector method of document is how you apply the selector.
CSS query:
VBA:
ie.document.querySelector("input[value='Test Web Button']").Click
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
How do I click a hidden checkbox and/or change the value of a hidden element (from "2" to "1") using ruby and watir?
The html
[div class="spec"]
[span class="listheader"]Rechtsgebieden[/span]
[div]
[span class="legalarea" style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);" ondblclick="call(this, '.legalarea');" onclick="call(this, '.legalarea');"]
[table id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_cbt" border="0"] [/table]
[/div]
[span class="legalarea-root " style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);"]
[div id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA105qwausqwt_pu" class="CheckboxValuePopup" style="display:none;position:absolute;" name="ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA105qwausqwt-pu"] [/div]
[span class="legalarea-root " style="cursor:default" onmouseout="hlt(this,false);" onmouseover="hlt(this,true);"]
[input id="ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA109qwausqwt_cb_cv" type="hidden" value="2" name="ctl00$cphMC$SS$eJuris$fltrJurLegalArea$qwtA109qwausqwt$cb_cv"]
[img ondblclick="CheckBox(this, '.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu', true);" onclick="CheckBox(this, '.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu', true);" src="http://portal.rechtsorde.nl/img/2.png"]
[a class="search-filter-link" onclick="$('.ctl00-cphMC-SS-eJuris-fltrJurLegalArea-qwtA109qwausqwt-pu').dialog('open'); callerID=this;"]Handels- en ondernemingsrecht[/a]
The code that works to access the element/find the value:
browser.hidden(:name, /A111/)first.value
you can use the JS to change the value
browser.execute_script('document.getElementById("ctl00_cphMC_SS_eJuris_fltrJurLegalArea_qwtA109qwausqwt_cb_cv").value = "1"')
Watir does not allow you to change the values of hidden elements. Watir is attempting to simulate an actual user. Since users cannot change the hidden element, neither can Watir. Instead, you should be trying to interact with the element that call the function to change the hidden element.
The html provided seems a bit awkward (see comment on question), but my guess is that the hidden value changes when clicking the img that looks like a blank checkbox field.
You could try clicking the image that is a sibling to the hidden field:
browser.hidden(:name, /A111/).first.parent.img.click
Given that the name of the hidden field appears to be dynamically generated, you might want to also try the following (which I think are based on the parts less likely to change):
#Assuming that the link text beside the checkbox is unique
browser.link(:text => 'Handels- en ondernemingsrecht').parent.img.click
#Assuming that there is only one hidden element with 'fltrJurLegalArea' in the name:
browser.hidden(:name, /fltrJurLegalArea/).first.parent.img.click