Làm cách nào để kiểm tra tiện ích con Sắp xếp giao diện người dùng JQuery bằng Selenium?

Question

Chúng tôi có một danh sách có thể sắp xếp bằng cách sử dụng JQuery UI Sortable mà chúng tôi đang cố gắng tự động hóa bằng cách sử dụng Selenium.

Có vẻ như chức năng dragAndDrop sẽ hoạt động, nhưng khi chúng tôi gọi nó, giao diện người dùng sẽ không thay đổi. Tuy nhiên, nếu chúng ta nhìn vào DOM với firebug, chúng ta thấy rằng thứ tự của các phần tử danh sách DID thay đổi. Có vẻ như đó chỉ là giao diện người dùng không làm mới.

Bất kỳ ý tưởng nào về cách hoạt động?

Answer 1

Không có giải pháp nào chúng tôi có thể tìm được, vì vậy chúng tôi chỉ đơn giản tạo các hàm trợ giúp javascript đã di chuyển các phần tử html xung quanh bằng jQuery. Nó làm việc cho trường hợp của chúng tôi nhưng nó cảm thấy bẩn!

Answer 2

Hãy thử kéoAndDropToObject. Tôi chỉ có thể di chuyển mọi thứ xung quanh bằng cách sử dụng Se-IDE (mặc dù tôi nghi ngờ Se-RC sẽ hoạt động tốt).

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

Answer 3

Tôi đã phát triển plugin JQuery để giải quyết vấn đề này, hãy xem jquery.simulate.drag-sortable.js bao gồm plugin cùng với một bộ kiểm tra.

Hy vọng bạn thấy điều này hữu ích! Phản hồi được hoan nghênh.

Matt

Answer 4

Đây là những gì tôi đã tìm thấy hoạt động tốt với Selenium và 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 

Answer 5

đây vào năm 2017 ray 4+ góc 1x, sử dụng thử nghiệm Capybara selen với 2 trình điều khiển khác nhau: poltergeist và chrome, tôi đã có thể nhận được capybara được xây dựng trong drag_to để làm việc ra khỏi hộp. Tôi sẽ không nói rằng đó là 100% đáng tin cậy như nơi mà nó kéo công cụ, nhưng những thứ kéo và ở lại kéo để đó là một bất ngờ thú vị. Tôi cũng có một phiên bản sửa đổi của Julie's answer để làm việc trong chrome, nhưng không phải poltergeist (không có driver.browser.action ... không chắc chắn những gì phiên bản poltergeist là nếu một trong những thậm chí tồn tại).

Vì vậy, anyway cái gì đó như:

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

Tôi rất ngạc nhiên rằng nó làm việc rất dễ dàng cho các ý kiến ​​trên nhưng tôi đoán mọi thứ đã được cải thiện.