Drag and Drop using Playwright
Drag and drop is a user interaction that involves moving an object by dragging it with the mouse. Automating drag and drop is challenging because it requires identifying both draggable and droppable elements, tracking the mouse cursor, simulating mouse dragging, and dropping the object.
In the early days of test automation tools, the drag-and-drop feature was achieved by integrating with a free, open-source automation tool called AutoIt, which was limited to automating Windows applications. Nowadays, most tools have this feature built-in. In Playwright, we can perform a drag-and-drop operation using the locator.dragTo() method, which takes two arguments: the first argument is the draggable element, and the second argument is the droppable element.
The dragTo() method drags the locator to a target locator or position. under the hood it executes a sequence of actions: first, it hovers over the element to be dragged, then it presses the left mouse button, moves the mouse to the drop target, and finally releases the left mouse button.
await page.locator('#item-to-be-dragged')
.dragTo(page.locator('#item-to-drop-at'));The locator.dragTo() method has options for force, that allow the drag-and-drop operation to happen even when the element is not draggable. It also has noWaitAfter an option which determines if the execution should wait for the drag and drop operation to finish, and timeout which sets the maximum waiting time for the operation to complete.
The dragover event is a mouse event that is fired when an element is dragged over another element. This event is often used by web applications to indicate that the dragged element is about to be dropped on the droppable element. If the page relies on the dragover event, repeated mouse moves will only trigger the event. In such situations, low-level methods like .hover(), mouse.down(), mouse.move(), and mouse.up() are also available. To simulate the dragover event, you can hover over the drop element a second time, or use mouse.move() followed by mouse.up() to release the pressed mouse.
await page.locator('#item-to-be-dragged').hover();
await page.mouse.down();
await page.locator('#item-to-drop-at').hover();
await page.locator('#item-to-drop-at').hover();
await page.mouse.up();The code utilizes the hover() method twice to simulate the dragover event. This is because the dragover event only fires once, even when the mouse is moved over the droppable element multiple times. By calling hover() twice on the droppable element, we can simulate two separate dragover events effectively.
Another way to simulate the dragover event is to use the mouse.move() method followed by the mouse.up() method. The mouse.move() the method moves the mouse cursor to the specified coordinates, while the mouse.up() method releases the mouse button.
The method chosen should be based on the specific requirements of the application. If the dragover event is not involved, the built-in dragTo() method can be used. If the dragover event needs to be simulated, the number of times the hover() method is used should be determined by the application's needs. If the application requires the dragover event to be fired twice, the hover() method should be used twice. If the application only requires the dragover event to be fired once, the mouse.move() method followed by the mouse.up() method can be used.
My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.
