Drag & Drop | Bondar Academy

Lesson Summary

In this lesson, we explore how to automate a drag-and-drop UI component using Playwright . The demonstration involves a test application with two lists where elements can be moved between them. Key Steps in Automation Identify the elements to drag and the drop location. Use a locator to specify the element to drag. Utilize Playwright's dragTo method for the drag-and-drop action. Example Implementation To implement the drag-and-drop functionality: Locate the element to drag (e.g., "clean my room"). Use the dragTo method with the drop list locator: page.locator('#drop-list').dragTo() Run the test to verify the element is dropped successfully. Alternative Method If the dragTo method does not work, an alternative approach involves simulating mouse movements: Hover over the element to drag. Simulate mouse down with await page.mouse.down() . Move the mouse to the drop section and hover again. Release the mouse with await page.mouse.up() . Summary Typically, use the dragTo method for drag-and-drop actions. If issues arise, simulate mouse movements using hover , mouse.down() , and mouse.up() methods. That's it for this lesson. See you in the next one!