5

Tenemos una lista ordenable usando JQuery UI Sortable que estamos tratando de automatizar usando Selenium.Cómo probar un widget ordenado de la interfaz de usuario de JQuery con Selenium?

Parece que la función dragAndDrop debería funcionar, pero cuando la llamamos, la interfaz de usuario no cambia. Sin embargo, si miramos el DOM con Firebug, vemos que el orden de los elementos de la lista cambió. Parece que es solo la interfaz de usuario que no se actualiza.

Alguna idea de cómo hacerlo funcionar?

Respuesta

2

Ninguna solución que pudimos encontrar funcionó, por lo que simplemente creamos funciones de ayuda de JavaScript que movieron los elementos html utilizando jQuery. Funcionó para nuestro caso, pero se siente sucio!

+0

Hola @David. ¿Cómo exactamente eso lo conseguiste? Si echa un vistazo a [http://stackoverflow.com/questions/7116149/javascript-testing-to-simulate-drag-for-jquery-ui-sortable-lists](http://stackoverflow.com/questions/ 7116149/javascript-testing-to-simulate-drag-for-jquery-ui-sortable-lists) verá que construí un sitio de demostración simple que muestra que mover los elementos no desencadena en realidad los eventos correctos para una UI ordenable lista. Tu ayuda será apreciada. –

+0

No logramos que funcione bajo selenio. Lo que hicimos es que, a los fines de nuestras pruebas automatizadas, agregamos un método javascript moveItem (de, a), que movió el elemento al lugar correcto (sin arrastrar y soltar, solo manipulación DOM). Las pruebas usan este método en lugar de intentar arrastrar y soltar. Por lo tanto, no estamos probando la funcionalidad de arrastrar y soltar, sino simplemente que la aplicación responde correctamente a la nueva posición del elemento. –

+0

Sí, estaba pensando que tendría que hacer lo mismo. Escribiré algún código con suerte reutilizable y lo compartiré con todos una vez que lo haya hecho. –

3

Pruebe dragAndDropToObject. Solo pude mover cosas usando Se-IDE (aunque sospecho que Se-RC también funcionaría).

dragAndDropToObject | css = div [clase = demostración]> ul> li: nth (2) | css = div [clase = demo]> ul> li: nth (5)

+0

Lamentablemente, esto no funcionó en nuestro caso. Sin embargo, es posible que hayamos tocado un borde, ya que la página es bastante compleja. –

2

He desarrollado un plugin de JQuery para resolver este problema, consulte jquery.simulate.drag-sortable.js que incluye un complemento junto con un conjunto de pruebas.

Espero que lo encuentres útil! Comentarios son bienvenidos.

Matt

+0

Me funcionó. – deb

0

Esto es lo que he encontrado que funciona bien con el selenio y el capibara

# 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

Aquí, en 2017 raíles 4+ 1x angular, utilizando pruebas de capibara selenio con 2 pilotos diferentes: poltergeist y cromo, me Pude obtener el capibara incorporado en el drag_to para que salga de la caja. No diré que es 100% confiable en cuanto a dónde arrastra cosas, pero las cosas se arrastraron y se mantuvieron arrastradas, así que fue una agradable sorpresa. También obtuve una versión modificada de Julie's answer para trabajar en Chrome, pero no en poltergeist (no driver.browser.action ... no estoy seguro de cuál es la versión de poltergeist si existe).

Así que de todos modos algo como:

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

Me sorprendió que funcionó da tan fácilmente los comentarios anteriores pero supongo que las cosas han mejorado.

Cuestiones relacionadas