Drag & Drop | Bondar Academy

Lesson Summary

In this lesson, we will explore how to automate drag and drop actions in a test application. The interface allows users to drag items from a list on the left and drop them on the right. Key Steps in Automation Navigate to the drag and drop page under extra components. Click on the drag and drop section to start the automation process. To automate the drag and drop, we will use the drag method, similar to what was learned in the previous lesson with sliders. The syntax is straightforward: drag(elementToDrag, dropLocation) Identifying Elements For the drag operation, we can use unique text such as get groceries . For the drop location, we inspect the area and find attributes like: Class: CDKDropList ID: CDKDropList-3 We can use a partial value of the class, such as Drop-List , for the drop action. Running the Test After executing the initial test, we noticed that the item was not dropped correctly. This was due to both the drop sections having the same class. By refining the locator to specify the drop area below done , we successfully completed the test. Assertions Finally, we made assertions to ensure: The page below done contains get groceries . The initial column does not contain get groceries anymore. In summary, to automate drag and drop: Use the drag keyword followed by the locator of the element to drag. Specify the drop location, optionally using drop for relative positioning. Implement assertions to validate the results. Thank you for joining this lesson, and see you in the next one!