How to click at any position in a slider using ruby-watir-cucumber and page object?

I am using Ruby+Watir+Cucumber+Watir+CeezyPO+.... and in one test I have the next div element:

<div class="slider-importe ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 50.3384%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 50.3384%;"></span></div>

Which is just an amount slider.

In my test I would like to click at any position of the slider and check the amount result that appears in the field text.

I have defined the Page Object for the div:

div(:slider_amount, :xpath => '//*[@id="simulatorParent"]/div[1]/div[1]/div[1]')

And later I can use it in the corresponding step:

page.slider_amount_element.click

Reference about cheezy Page Object: https://www.rubydoc.info/github/cheezy/page-object/PageObject/Accessors#div-instance_method

Using it in that way I can click in the middle of the slider, and this is ok. But, how is possible to click at any position of the slider?

Solution

You will need to use Selenium's ActionBuilder - particularily the #move_to method. Unfortunately Watir, and therefore Page-Object, have not yet built a wrapper around actions (feature request #829).

The needed code is:

xoffset = 50      # how far right from the top-left corner
yoffset = 100     # how far down from the top-left corner
page.browser.driver.action.move_to(page.slider_amount_element.element.wd, xoffset, yoffset).click.perform

Where page is your PageObject.