How to automate drag and drop action in Virtuoso

About Article:

This article will describe how to automate drag and drop action in Virtuoso

Solution:

Drag and drop implementation can differ from website to website.

There are 3 common methods of using the drag-and-drop functionality. 

1. Mouse over & (Mouse drag to or Mouse drag by) combination - see Virtuoso Guide - Mouse actions for more information)
2. Mouse down & (Mouse drag to or Mouse  by) & Mouse up - see Virtuoso Guide - Mouse actions for more information
3. drag and drop library extension:

Explanation:

1. Mouse over & (Mouse drag to or Mouse drag by) combination:
   1. Mouse over: Hovering over an element that has a title attribute.
   2. Mouse drag to: Dragging the mouse from its current position to a target element or specific coordinates.
   3. Mouse drag by: Dragging the element by relative coordinate values.

Example NLP scripts:
Mouse over "Draggable Element"
Mouse drag to "Target Element"
Mouse drag by 100,50

2. Mouse down & (Mouse drag to or Mouse drag by) & Mouse up:
   1. Mouse down: Initiating the drag action by pressing the mouse button on the source element.
   2. Mouse drag to: Moving the mouse to a target element or coordinates while holding the button down.
   3. Mouse up: Releasing the mouse button to drop the element.

Example NLP scripts:
Mouse down "Element to drag"
Mouse drag to "Drop Target"
Mouse up

3. Drag and drop library extension:
   1. This method uses predefined library extensions to handle drag-and-drop operations.
   2. Storing element details of the "Element to drag from" and "Element to drop to" in variables like $from and $to.
   3. Performing the drag-and-drop operation using the simulateDragAndDropVirtuosoStoredElement($from, $to) command

Example using selectors:

dragAndDrop(".from.selector", "#to.selector")

Example using stored elements:

store element details of "Element to drag from" in $from
store element details of "Element to drop to" in $to
dragAndDrop($from, $to)

Known limitations

The NLP-based solution may encounter limitations with HTML5 events, particularly in the first two methods. For robust automation, consider using extensions from the Virtuoso library.