Drag and drop steps

The mabl Trainer supports drag and drop actions when testing your application. These actions are automatically recorded and can be easily modified by following the steps listed below.

📘

Drag and drop vs click and drag

There are some distinctions between drag and drop and click and drag actions. At this time, mabl only supports drag and drop actions.

• Drag and drop requires two elements, one which is draggable and the other which is the drop target element.
• Click and drag requires an element and an offset (such as coordinates). Examples of click and drag actions include moving a slider from one position to another, modifying the size of a text box, or dragging an image in a frame to show a specific portion of it.

Modifying drag and drop steps

While drag and drop steps are automatically recorded, sometimes dynamic regions may appear during the drag step which impacts mabl's ability to accurately record the drop target. To address this, drag and drop steps are easily modifiable to specify the intended target.

1. After recording a drag and drop action in the mabl Trainer, select the "Edit" button on the "Click and hold" step or the "Release" step (depending on what you would like to modify).
2. Click on the "Reselect" button and select the desired element to change the target element for the action.

3. Select "OK"

🚧

Replaying drag and drop steps

Ensure that the mouse is not moved when replaying drag and drop steps in the Trainer. This can impact the trajectory of the drag action.

Modifying existing actions

Existing steps can be modified to become drag and drop steps. For example, a "Click" action on the drag target can be changed to a "Click and hold" action, and a "Click" action on the drop target can be changed to a "Release" action.

1. After recording a "Click" or "Hover" step, select the "Edit" option for that step.
2. Change the action to "Click and hold".

📘

Click and hold / Release

Drag and drop steps occur in pairs, with a "Click and hold" step for moving an element, and a "Release" step for the drop. Both steps are needed in order to have a valid drag and drop action. Other steps cannot be added between these actions.

3. View the modified step in the Trainer. An error will appear until the corresponding "Release" step has been added.

4. Edit the second click step and change the action to "Release".

5. You will be returned to the main Trainer page, with the "Release" step shown in the list of steps.

Custom find actions

Drag and drop actions can also be used in combination with custom finds in the following way:

1. Select the "Find Elements" option from the step list, visible by clicking the "Insert Step" plus button in the toolbar at the bottom of the screen.
2. Choose the Find Type, Query Type, and Action. Both "Click and hold" and "Release" actions can be found on this menu.

3. Specify the query, and click "OK" to add this step to your test.

🚧

Current limitations

There are some limitations drag and drop actions at this time:

• Elements are moved center to center, where the center of the drag target is placed on the center of the drop target.
• Drag and drop actions must last at least 0.5 seconds and move 20 pixels in order for mabl to capture this action.
• Drag and drop with <svg> elements does not support interacting with specific coordinates in a <path> element.