How to test a JQuery UI Sortable widget using Selenium?

We have a sortable list using JQuery UI Sortable that we are trying to automate using Selenium.

It looks like the dragAndDrop function should work, but when we call it, the UI does not change. However if we look at the DOM with开发者_JS百科 firebug, we see that the order of the list elements DID change. It seems it's just the UI that does not refresh.

Any idea how to get it working?

Try dragAndDropToObject. I was just able to move things around using Se-IDE (though I suspect Se-RC would work as well).

dragAndDropToObject | css=div[class=demo] > ul > li:nth(2) | css=div[class=demo] > ul > li:nth(5)

No solution we could find worked, so we simply created helper javascript functions that moved the html elements around using jQuery. It worked for our case but it feels dirty!

I have developed a JQuery plugin to solve this problem, check out jquery.simulate.drag-sortable.js which includes a plugin along with a suite of tests.

Hope you find this useful! Feedback is welcome.

Matt

Here's what I have found works well with Selenium and Capybara

# Move a row at index start_index to end_index
def move(start_index, end_index)
  row = sortable_row(start_index)

  # We are not using Capybara drag_to here as it won't work properly in dragging first and last elements,
  # and also is a bit unpredictable whether it will drop before or after an element
  move_amount = ((end_index - start_index)*row_height).to_i
  # Move a little more than the explicit amount in each direction to be certain 
  # that we land in the correct spot
  move_amount_sign = (move_amount >= 0) ? 1 : -1
  move_amount = move_amount + move_amount_sign*(row_height * 0.25).to_i
  @session.driver.browser.action.drag_and_drop_by(row.native, 0, move_amount).perform
end

# Get the height of a row for sorting
def row_height(refresh=false)
  @row_height = nil unless @row_height || refresh
  unless @row_height
    @row_height = @session.evaluate_script("$('.my-sortable-row').height()")
  end
end

Here in 2017 rails 4+ angular 1x, using capybara selenium testing with 2 different drivers: poltergeist and chrome, I was able to get the capybara built-in drag_to to work out of the box. I won't say that it's 100% reliable as to where it drags stuff, but the stuff dragged and stayed dragged so that was a pleasant surprise. I also got a modified version of Julie's answer to work in chrome, but not poltergeist (no driver.browser.action... not sure what the poltergeist version is if one even exists).

So anyway something like:

element = page.find_all('.draggable_thing')[0]
target = page.find_all('.droppable_thing')[3]
element.drag_to(target)

I was surprised that it worked so easily given the above comments but I guess things have improved.