Skip to content
CodeKruPro

Drag a box onto a drop zone

Automation taskMediumAsked in: Accenture, Capgemini, Infosys, TCS, Wipro

A common task in live rounds: "Drag item A onto target B and prove it landed." Use the drag-and-drop action, then check the page state, such as the text of the drop zone. A test that only shows no error was thrown proves nothing. In this task you drag a box onto a drop zone, then check where the box ended up. The drop zone starts below the visible area, so scroll to it first (Java) or make the window larger (Python).

Drag and Drop with the Actions Class

Drag and Drop

actions.dragAndDrop(source, target) drags an element from one location to another.

The drop target has to be on screen. In the lesson's browser window, Drop Zone 1 starts just below the visible area, so a drag performed straight away only scrolls the page and drops nothing. actions.scrollToElement(target) scrolls the page until the target is visible; do that first.

On the Drag and Drop page, there are three boxes (box1, box2, box3) and drop zones. Drop Zone 1 (id="dropZone1") accepts drops.

HTML Structure:

<!-- Draggable elements -->
<div id="box1" draggable="true">Box 1</div>
<div id="box2" draggable="true">Box 2</div>
<div id="box3" draggable="true">Box 3</div>

<!-- Drop targets -->
<div id="dropZone1">Drop Zone 1</div>

Task:

  1. Navigate to https://testkru.com/Interactions/DragAndDrop
  2. Find Box 1 (id="box1") and Drop Zone 1 (id="dropZone1")
  3. Print the text of box1 after the label Box text:
  4. Scroll Drop Zone 1 into view with scrollToElement()
  5. Drag box1 to dropZone1 with dragAndDrop() and perform()
  6. Check whether Drop Zone 1's text now contains Box 1 (a dropped box moves inside the zone, so its label becomes part of the zone's text) and print the result after the label Drop Zone 1 has Box 1:

Expected output:

Box text: Box 1
Drop Zone 1 has Box 1: true

If the last line prints false, the drop did not happen. Check that you scrolled to the zone before dragging.