Drag and drop steps

The mabl Trainer supports drag and drop actions when testing your application. This article explains how the mabl Trainer records drag and drop steps.

Capturing drag and drop actions

Drag and drop steps occur in pairs. When you drag and element and drop it in a different area of the page, the mabl Trainer records the following steps:

• A "Click and hold" step for the drag target - element that you want to move
• A "Release" step for the drop target - the area where you want to drop the element

Both steps are required to create a valid drag and drop action.

In order for the Trainer to capture a drag and drop action, the action must ast at least 0.5 seconds, and the element must move at least 20 pixels.

During Trainer replay and test runs, mabl moves the center of the drag element to the center of the drop target.

📘

Limitations

The mabl Trainer does not support click and drag actions. 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.

If a drag and drop action interacts with an <svg> element, the mabl Trainer cannot with specific coordinates in a <path> element.

Targeting the correct elements

If the drag and drop action does not move the correct target element to the correct area of the page, consider one of the following modifications:

Edit the existing steps

After recording a drag and drop action, reselect the target element for either step: hover over the step and click on the edit pencil. Click on the Reselect button to reselect the target element.

Convert click steps into drag and drop steps

Record two click steps on the drag target and the drop target. For both click steps, hover over the step, click on the edit pencil, and update the actions to "Click and hold" and "Release" respectively.

Use Configure Find

If there are several similar elements on the page, add Configure Find to identify the unique attributes of the target element.

Create custom find steps

If you cannot target the correct elements using Configure Find, create custom find steps for "Click and hold" and "Release" steps using CSS or XPath.