A way around Element cannot be scrolled into view - Watir-webdriver with Ruby

Question

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.

Risky

I could not reproduce your problem using a page with just the html provided. Is there more of the page that is required to reproduce your problem? What browser did your try (ie does it occur in all browsers)? You mention using the latest watir-webdriver gem, but did you also ensure that selenium-webdriver is up-to-date? – Abbate

You say "We know Selenium 2 scrolls the page to the element..." Can you elaborate on this? How do you "know" this? Are you seeing it happen? – Dinesen

Is there a lot of Ajax stuff happening on the page? portions of the page being rendered after the browser is done 'loading' Your problem might stem from trying to interact with the element before it is 'ready' or has been moved into some final position on the page, in other words a synchronization issue. You could try the commands manually via IRB and see if they work, if they do, that's usually sign of a sync problem – Presidio

I would just recommend to try a different locator. XPATH or css should do it for you and you shouldn't need to scroll or something. Are you using Firebug? – English

I don't understand the part about being QA Engineers. If changing the HTML were the needed solution to automating the tests and removing regression risk, you ought to have the ability to get it changed by bringing the issue up to the team. – Smacker

Answer 1

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.

Democratize

Answer 2

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!

English

Answer 3

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\")")

Amblyoscope

The question doesn't suggest that the radio element is not settable; only that they have difficulty scrolling to it. – Vanda

Answer 4

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 :-)

Birdbath

Answer 5

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

Pituri