How do I drag a jQuery slider handle from within Capybara and ChromeDriver?

Question

I am able to execute the following code to move the slider handle, but the events triggered in the browser are not taking place.

page.execute_script(%Q($('#slider_handicap').slider('values',1,30)))

That correctly sets the right handle to 30, but I need it to behave as if I were actually taking the mouse and dragging the handle to 30 then releasing.

Answer 1

resynchronize has been removed from Capybara 2.0 so user853088's answer for Selenium would now look like this:

module CapybaraSeleniumExtension
  def drag_by(right_by, down_by)
    driver.browser.action.drag_and_drop_by(native, right_by, down_by).perform
  end
end

Answer 2

I extended capybara dragging before.
It can move elements by a given offset.

You could try

module CapybaraExtension
  def drag_by(right_by, down_by)
    base.drag_by(right_by, down_by)
  end
end

module CapybaraSeleniumExtension
  def drag_by(right_by, down_by)
    resynchronize { driver.browser.action.drag_and_drop_by(native, right_by, down_by).perform }
  end
end

::Capybara::Selenium::Node.send :include, CapybaraSeleniumExtension
::Capybara::Node::Element.send :include, CapybaraExtension

And then

page.find('#slider_handicap').drag_by(30, 0)

But it may not suit the slider's scale.

The original are

• Capybara::Node::Element#drag_to
• Capybara::Selenium::Node#drag_to
• Selenium:: WebDriver::ActionBuilder drag_and_drop and drag_and_drop_by

There are a few words of caution.

• This extension could depend on the type of driver and the version of driver.
• This kind of test with dragging could lead to difficulty of maintainance.