Drag and Drop with the Actions Class

How it works

actions.dragAndDrop(source, target).perform() presses the mouse on the source, moves to the target and releases. For pages that implement dragging with mouse events, that is a complete drag. dragAndDropBy(source, 120, 0) does the same with a pixel offset, which suits sliders.

The Drag and Drop page uses HTML5 drag and drop instead: its boxes have draggable="true" and the drop zones listen for drop events. The gesture still works, as long as the target is on screen. The runner's window shows 437 pixels of the page, and Drop Zone 1 starts at about 461, just below that. A drag fired straight away scrolls the zone up as the pointer moves toward it, and the release lands nowhere useful, so box 1 stays put. Once the zone is visible, one dragAndDrop() moves the box.

scrollToElement(target) on the same Actions object scrolls the page with a wheel action until the target is in view. Perform it before the drag, either on its own or at the start of the same chain. Making the window larger is less reliable: at 1024 by 900 the layout changes and the zone is still not in place for the drop.

A printed message only proves the code got that far. To prove the drop, read the page afterwards. A dropped box becomes a child of the zone, so the zone's getText() then includes the box's label as well as its own.

About the assignment

The starter gives you an Actions object. You find box 1 and Drop Zone 1, print the box's label, bring the zone on screen, perform the drag, and print whether the zone now holds the box.

What you will do

1. 1Find the box and the drop zone by the ids from the task.
2. 2Print the box's text after the label Box text:.
3. 3Scroll the zone into view with scrollToElement() and perform().
4. 4Call dragAndDrop() with the box as source and the zone as target, then perform().
5. 5Read the zone's text again, check whether it contains the box's label, and print that true or false after the label from the task.

Common mistakes

• Swapping source and target

  The first argument is what you pick up. Reversed, the gesture starts on the drop zone, which is not draggable.

• Dragging before the zone is visible

  Without the scroll, the check prints false: the drag only moved the page, and Drop Zone 1's text is unchanged.

• Reading the zone before the drag

  Text read before perform() is the old text. Call getText() on the zone after the drag, or the check is always false.

• Dropping on the no-drop zone

  Drop Zone 2 (id="dropZone2", shown as "No Drop Zone") has the class no-drop and no drop handler, so a box dropped there stays where it was.

In a real test suite

Related lessons

• Click and Hold ActionPress and hold without releasing, the first half of a drag.
• JavaScript Executor - Get ValuesRun JavaScript in the page, the fallback when an HTML5 drag ignores the gesture.
• Mouse Hover ActionMove the pointer with moveToElement().

To try one of these calls on any page without a task, open the Online Selenium Java Compiler.

Starter code

The editor above opens with this code. Fill in the TODO lines, then run and submit it.

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class Main {
    public static void main(String[] args) throws Exception {
        WebDriver driver = new ChromeDriver();
        driver.get("https://testkru.com/Interactions/DragAndDrop");
        
        Actions actions = new Actions(driver);
        
        // TODO: Find box1 and dropZone1
        // TODO: Print box1 text
        // TODO: Scroll dropZone1 into view, then drag box1 onto it
        // TODO: Print whether dropZone1's text now contains "Box 1"
        
        driver.quit();
    }
}