How to test jQuery UI Sortable widget using Selenium?

We have a sorted list using the jQuery UI Sortable , which we are trying to automate using Selenium.

It seems that the dragAndDrop function should work, but when we call it, the user interface does not change. However, if we look at the DOM with firebug, we see that the order of the elements in the DID list changes. It seems that only the user interface is not being updated.

Any idea how to make it work?

+5
source share
5 answers

There is no solution that we could work with, so we just created javascript helper functions that moved the html elements around using jQuery. He worked for our case, but he feels dirty!

+2
source

Try dragAndDropToObject. I just could move things using the Se-IDE (although I suspect that the Se-RC will work too).

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

+3
source
+2

, , Selenium 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
0

2017 4+ angular 1x, capybara selenium : poltergeist chrome, drag_to capybara . , 100% , , , . , (no driver.browser.action... , , ).

, - :

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

, , , , .

0

All Articles