So, we have the following code in our page:
<div class="toggle-wrapper">
<input id="HasRegistration_true" class="registration_required toggle" type="radio" value="True" name="HasRegistration" data-val-required="The HasRegistration field is required." data-val="true">
<label for="HasRegistration_true" class="">On</label>
<input id="HasRegistration_false" class="registration_required toggle" type="radio" value="False" name="HasRegistration" checked="checked">
<label class="checked" for="HasRegistration_false">Off</label>
</div>
These are 2 radio buttons. 'On' and 'Off'. 'Off' is the default value.
Using Watir-webdriver and Ruby, we want to select the 'On' radio button. We do so like this:
browser.radio(:id => "HasRegistration_true").set
But in doing so, we get the following error:
`WebElement.clickElement': Element cannot be scrolled into view:[object HTMLInputElement] (Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)
We know Selenium 2 scrolls the page to the element, so trying to scroll down is useless.
We are always using the latest releases of watir-webdriver and ruby.
We can't change the HTML of the page since we're QA engineers.
Here are two solutions that have worked for me:
There is a Ruby gem called watir-scroll that can work.
Then
require 'watir-scroll'
browser.scroll.to browser.radio(:id, "HasRegistration_true")
If you don't want to add a gem, my co-worker suggested something that somewhat surprisingly (to me) had the same effect as the above code:
browser.radio(:id, "HasRegistration_true").focus
browser.radio(:id, "HasRegistration_true").set
In my code, ".focus" scrolled straight to the element that was previously not visible. It may work for you as well.
First of all try locating the element using XPATH:
browser.element(:xpath, "//input[#id='HasRegistration_true']").click
or
alternatively if it is a hidden element you are trying to locate then you are better off using CSS. Download firebug add-on for firefox and copy the CSS path of your element.
It should be something like:
browser.element(:css => "the CSS path you have copied from Firebug").click
One of the 2 should do it for you!!
Best of luck!
You could manipulate the html on the fly by executing some javascript to make the radio element settable. To execute javascript on a page, do something like:
#browser.execute_script("your javascript here")
I used something like the following javascript to strip the class out of a label tag which moved it out of the way of the input tag I was attempting to act on for a Chrome specific problem I had.
execute_script("$(\"label.classname\").removeClass(\"classname inline\")")
If the element is contained within a form and a div (Wrap) class I found that I had to do the following to click the 'No' radio button on the "https://quote.comparethemarket.com/Motor/Motor/AboutYourVehicle.aspx?" page:
div_list = #browser.form(:action => "AboutYourVehicle.aspx?ton_t=CTMMO&prdcls=PC&rqstyp=newmotorquote&AFFCLIE=CM01").div(:class => "inputWrap").divs(:class => "custom-radio")
And then:
div_list[1].click
Hope this solves your issue too :-)
I'm not using watir but I have the same error as you "...could not be scrolled into view ...". I tried to use watir just to solve it and didn't work for me. Then, I use an ActionBuilder (move_to with click) and the error disappeared.
My line to avoid the error is:
#driver.action.move_to(*webelement*).click.perform
I hope it will be useful for you
Related
I am trying to click on the button.
<input data-ember-action="797" value="Search Now" class="cta-1st clrboth primary search-button firepath-matching-node" type="button">
but it keep showing an error of not finding the element to click.
it finds all the elements until the end but when it comes to "click" it throws an error. My code is like this:
#browser.div(:id=>'ember730').section(:class=>'tab-pane fade active in').form(:class=>'flight-search ').input(:class=>'cta-1st clrboth primary search-button').click
Am I missing something?
I am using Watir
Thank you for all the help here. the problem was, I had a wrong reading in one of the elements.
I was missing this part.
#browser.div(:id=>'ember730').section(:class=>'tab-pane fade active in').form(:class=>'flight-search ').text_field(:class=>'cta-1st clrboth primary search-button firepath-matching-node').click
As there is value="Search Now" section of type="button" here, following simple code snippet should do. I have made this working using Watir in my project..
#browser.button(value: "Search Now").click
I'm looking to add files to an <input type="file">
Here is a snippet of the html
<span class="btn btn-xs btn-primary btn-file"> #found
<span class="blahicon blahicon-upload"></span>
Browse
<input type="file" data-bind="value: fileName, event: { change: uploadImagesOnChange }"
accept="blah/txt" multiple=""> #not found
</span>
and here's the capybara and ruby
within_frame('frame1') do
within_frame('frame2') do
within(:xpath, [containing span xpath]) do # finds this
find(:xpath, './/*[#type="file"]').send_keys('C:\Users\...\blah.txt') #ElementNotFound
end
end
end
I see no hidden block and it's super scoped. Any thoughts?
Instead of using within(:xpath, [containing span xpath]) can you directly check the xpath of input like: has_xpath?(".//span[contains(text(),'Browse')]/input")
and if it is returning true then try with using
find(:xpath, ".//span[contains(text(),'Browse')]/input").send_keys ('C:\Users\...\blah.txt')
If you are aware about the 'pry' gem then you can debug this thing by trying various xpath combinations instead of just running the whole script, So you will get to know the actual problem.
I think there is mistake in your xpath
.//*[#type="file"]
Change to
.//*[#type='file']
as browser can detect attribute value with double quotes(" ") but inside script you need to use it in single quote (' ')
Also can make different combinations of your XPath like
//input[#type='file']
Judging by the class btn-file on the wrapper class, it's probable you're using Bootstrap and one of the "standard" methods to hide the actual file input element so that it can be style the same across multiple browsers. There are a number of ways of hiding the button from just setting display:none on it to the more "modern" method of expanding it to the same size as the replacement button and seeting it's opacity to 0 so it become a transparent overlay on the replacement.
The basic strategy to dealing with this kind of setup in Capybara is to use execute_script to make the element visible first and then use attach_file or set as normal. For instance if your site is using the opacity method of hiding the file element you could do something like
within_frame('frame1') do
within_frame('frame2') do
within(:xpath, [containing span xpath]) do # finds this
file_input = find(:file, visible: :all)
page.driver.browser.execute_script("$(arguments[0]).css('opacity',1)", file_input.native)
file_input.set('C:\Users\...\blah.txt')
end
end
end
Note - this code assumes you're using jQuery in your page and will only work with the selenium driver since it uses seleniums driver specific ability to pass elements from capybara to selenium in the execute_script call. If not using jQuery the JS will need to change and if using another driver you would need to find the element in the JS script using DOM methods and then modify its opacity.
using capybara how can i check an element is present or not.
i used following code but it is not working
page.should_not have_selector('#confirmation_code')
<div style="width:250px;display:block;float:right;text-align:right;">
<span id="email_text">Order Number:<br></span>
<input id="confirmation_code" type="text">
</div>
i want to check above text box element is present or not?
So going from the last comment from Sush,
The first line in the code in the question is not correct at all. That will verify that the element is not shown.
You could use the following instead:
page.should have_css('#confirmation-code')
or if you wanted the text within do this:
page.find('#confirmation-code[type="text"]')
I will be honest though I am going by what I think the question is, it is not very clear what you are looking to achieve.
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I have following code in my ie web page. I want text value of tag (means "ABCD:"). I am using ruby watir for that.
<fieldset>
<legend class="fieldset">ABCD:</legend>
<fieldset>
I have tried with below code, but I don't why its not working and giving error(undefined method `text' for nil:NilClass)
ie.element_by_xpath("//legend[contains(#class, 'fieldset')]/").text
Is there any other way or is there anything wrong in my code.
Is that the only time the class of 'fieldset' is used on the page?
The list of supported elements shows unknown for Watir and supported for Watir-Webdriver for the legend tag.
Have you tried using Watir-Webdriver and code along these lines?
puts browser.legend(:class => 'fieldset').text
That's cleaner, easier to read, and will likely be faster. Only resort to using xpath if nothing else works