Many applications include drag and drop functionality that allows users to arrange elements on the page. In the mabl Trainer, you can record drag and drop interactions as test steps to make sure your application is working as expected.
This article explains how to…
Capturing a drag and drop action with the mabl Trainer
Recording drag and drop steps
With the record button on, drag the element you want to move to the area where you want to drop it. The mabl Trainer automatically records two steps for this interaction:
- A "click and hold" step for the dragged element
- A "release" step for the drop target
In order for the Trainer to record these steps, the drag and drop action must last at least 0.5 seconds, and the dragged element must move at least 20 pixels.
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 target with specific coordinates in a <path> element.
Troubleshooting drag and drop steps
If the drag and drop steps don't work as expected on Trainer replay or during test runs, consider making one of the following modifications:
Update target elements
If the drag and drop steps aren't targeting the correct dragged element or drop target, try one of the following strategies to update the target elements:
- Convert click steps: record two click steps on the dragged element 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.
Converting a "click" step into a "click and hold" step
- Configure Find: If there are several similar elements on the page, add Configure Find to identify the unique attributes of the target element.
- Use CSS or XPath: 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.
Update the number of mousemove events
If the "release" step isn't working as expected, consider increasing the number of mousemove events. Mousemove events control how smoothly the dragged element moves toward the drop target, which is important for some applications:
- Hover over the "release step"
- Click on the edit pencil
- Make sure the checkbox "Use HTML5 drag and drop API" is unchecked
- Change the number of mousemove events. Increasing the number of intermediate steps for a mousemove event can help "smooth out" a mousemove.
Updating the number of mousemove events for a "release" step
Change the HTML5 drag and drop API setting
The mabl Trainer automatically detects the web events that simulate drag and drop actions in your application. If the drag and drop steps don't appear to have any effect when executing, try changing the HTML5 setting. For both the "click and hold" and "release" steps, do the following:
- Hover over the step.
- Click on the edit pencil.
- Update the HTML5 setting:
- To use HTML5 drag and drop events, check the setting.
- To use mouse and pointer events, uncheck the setting.
A "click and hold" step configured to use the HTML5 drag and drop API