Come testare un widget Sortable dell'interfaccia utente JQuery utilizzando Selenium?

Question

Abbiamo una lista ordinabile usando JQuery UI Sortable che stiamo cercando di automatizzare usando Selenium.

Sembra che la funzione dragAndDrop dovrebbe funzionare, ma quando la chiamiamo, l'interfaccia utente non cambia. Tuttavia, se guardiamo al DOM con firebug, vediamo che l'ordine degli elementi della lista DID cambia. Sembra che sia solo l'interfaccia utente che non si aggiorna.

Qualche idea su come farlo funzionare?

Answer 1

Nessuna soluzione che abbiamo trovato funzionava, quindi abbiamo semplicemente creato le funzioni di javascript di helper che spostavano gli elementi html usando jQuery. Ha funzionato per il nostro caso ma sembra sporco!

Answer 2

Prova dragAndDropToObject. Ero solo in grado di spostare le cose usando la Se-IDE (anche se sospetto che anche la Se-RC funzionerebbe).

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

Answer 3

Ho sviluppato un plugin JQuery per risolvere questo problema, controlla jquery.simulate.drag-sortable.js che include un plug-in e una serie di test.

Spero che trovi utile! Il feedback è benvenuto

Matt

Answer 4

Ecco quello che ho trovato funziona bene con Selenio e 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

Qui nel 2017 rotaie 4+ 1x angolare, usando test Capybara selenio con 2 diversi driver: poltergeist e cromo, io è stato in grado di ottenere il capybara integrato drag_to per lavorare fuori dalla scatola. Non dirò che è affidabile al 100% dove trascina roba, ma la roba è stata trascinata e trascinata, quindi è stata una piacevole sorpresa. Ho anche ottenuto una versione modificata di Julie's answer per funzionare in chrome, ma non poltergeist (no driver.browser.action ... non sono sicuro di quale sia la versione poltergeist se ne esiste addirittura una).

Quindi, comunque qualcosa di simile:

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

mi ha sorpreso che ha funzionato così facilmente dato le osservazioni di cui sopra, ma credo che le cose sono migliorate.