Làm cách nào để kiểm tra giao diện người dùng JQuery có thể phân loại bằng dưa chuột

Question

Tôi đang thử viết một bài kiểm tra dưa chuột/capybara để sắp xếp lại một số mục và sau đó lưu lại. Bất kỳ suy nghĩ về cách tốt nhất làm điều này?

Answer 1

Tôi đang sử dụng một bước web như thế này và nó hoạt động tốt:

When /^I drag "([^"]*)" on top$/ do |name| 
    item = Item.find_by_name(name) 
    sleep 0.2 
    src = find("#item_id_#{item.id}") 
    dest = find("div.title") 
    src.drag_to(dest) 
end 

Answer 2

phương pháp drag_to không làm việc cho tôi. Nhưng tôi đã có thể gây ra phần tử đầu tiên trong danh sách của tôi được kéo vào vị trí cuối cùng bằng cách bao gồm những điều sau đây trong jquery.simulate.js Capybara selen thử nghiệm của tôi sử dụng:

page.execute_script %Q{ 
    $.getScript("/javascripts/jquery.simulate.js", function(){ 
    distance_between_elements = $('.task:nth-child(2)').offset().top - $('.task:nth-child(1)').offset().top; 
    height_of_elements = $('.task:nth-child(1)').height(); 
    dy = (distance_between_elements * ($('.task').size() - 1)) + height_of_elements/2; 

    first = $('.task:first'); 
    first.simulate('drag', {dx:0, dy:dy}); 
    }); 
}     

Answer 3

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

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

Đối với tôi, #drag_to đã hoạt động nhưng quyền hạn của nó dường như bị giới hạn.

Để di chuyển một dòng của bảng UI-sắp xếp được xuống, tôi đã phải tạo ra một bảng với ba hàng, sau đó chạy bước dưa chuột này:

# Super-primitive step 
When /^I drag the first table row down$/ do 
    element = find('tbody tr:nth-child(1)') 
    # drag_to needs to drag the element beyond the actual target to really perform 
    # the reordering 
    target = find('tbody tr:nth-child(3)') 

    element.drag_to target 
end 

này sẽ trao đổi đầu tiên với hàng thứ hai. Giải thích của tôi là Capybara không kéo đủ xa, vì vậy tôi đã cho nó một mục tiêu ngoài mục tiêu thực sự của tôi.

Lưu ý: Tôi đã định cấu hình giao diện người dùng có thể sắp xếp với tolerance: 'pointer '.