How can I automate a slider using watir-webdriver and ruby?

Question

I am trying to automate a Jquery UI slider using watir-webdriver and ruby but am having no luck. I want to be able to manipulate the slider to either increase or decrease the value. I have searched everywhere and asked a few of my colleagues but no one has an answer. I am attaching a piece of HTML code for the slider. Any help would be much appreciated.

URL link: http://www.whatcar.com/new-car-deals/ (price range slider)

I haven't done any coding for the slider as I have no idea how to go about it. If I could be set on the right path that would be fantastic. Also it seems the HTML code doesn't seem to be showing on the question I am asking.

Answer 1

To achieve this using Rspec and Watir-Webdriver with Page-Object gem I used:

div(:slider, id: "slider-range") #in page file
#then in spec file
browser.slider_element.input.send_keys :home

This answer comes from http://watir.com/guides/special-keys/

Answer 2

This worked great. We just added these sliders to our website and my first thought was "how are we going to automate that!?"

I wanted to add an example will full code that is available publicly for people to experiment with. The following interacts with an example on jqueryui.com.

require "watir-webdriver"
@browser = Watir::Browser.new :chrome
@browser.goto "http://jqueryui.com/slider/#default"
@browser.frame(:class => "demo-frame").span(:class =>"ui-slider-handle").click
@browser.frame(:class => "demo-frame").span(:class =>"ui-slider-handle").send_keys :home 
puts "clicked home"
7.times do
  @browser.frame(:class => "demo-frame").span(:class =>"ui-slider-handle").send_keys :arrow_right
end 

Answer 3

it's a Jquery widget that appears (looking at the scripts) to respond to key presses once one of the handles has been clicked on. the handles are link objects, inside a pair of divs, the outer one has the ID value 'slider-range'

You should be able to address them via browser.div(:id => 'slider-range').link(:index => n) where n = 0 for the lefthand one and n=1 for the right hand one.

Try this manually first

• Click on the left handle for the slider
• Then press arrow keys on the keyboard.. it will move 1K(pounds) up or down with each right or left arrow keypress.
• Once you have moved it right, click the Home key and it should reset to its min value
• repeat above for the right handle but reset it to far right using the End key.

In theory you could fire a click event at the right slider to get focus, then fire off some keypress events to first set it far right (end) followed by enough left arrows to move it down to the top value you want.

Repeat for the left handle, setting it to the left end with the home key, and moving it with right arrow keypresses

I don't have the time right now to experiment further and develop an exact script, but I think you could probably create two little functions even that took an upper and lower range value and did the required number of keypresses to move the lower up from 5K to the right amount, and the upper down from 100k

Note that this thing is very very event driven, it responds (at least when watching the dev tools while playing with it) to being moused over, mousedown, mouseup, etc.. if using click does not work to 'get the attention' of the control so it will respond to keypresses, try using the onmousedown event instead.

Using the code from your answer, to move the left slider to 12K I'd try

browser.div(:id => 'slider-range').link(:index => 0).click  #make sure it has focus
browser.div(:id => 'slider-range').link(:index => 0).send_keys :home #set to 5K    
7.times do
   browser.div(:id => 'slider-range').link(:index => 0).send_keys :arrow_right
end 

Answer 4

Thank you very much Chuck. I got it working. Here is the script I used:

@browser.link(:xpath, "/html/body/div/div[3]/div[4]/div/div/div/a").send_keys :arrow_right

Still needs a bit of tweaking, but I should be ok now.