Drag and Drop Actions in playwright

 In this example, we will explore how to implement drag and drop actions using Playwright, illustrated with a practical example. In Playwright, performing drag and drop actions is straightforward using the dragTo() method available on elements. Here's a breakdown of how to do it:

✅ Syntax

// Locate the draggable and drop target elements
  const draggable = await page.locator('#source'); // The element to drag
  const dropTarget = await page.locator('#target'); // Where to drop

  // Perform the drag and drop
  await draggable.dragTo(dropTarget);

How to perform Drag and Drop in playwright

Drag and drop is an interaction that allows users to click on an element, drag it to a different location, and then release it to drop it there.

The dragTo() method is called on the draggable element, specifying the droppable area as the target. This simulates the action of dragging the element from its original position and dropping it in the new location.

This example demonstrating how to perform drag and drop actions using Playwright:

// @ts-check
import { test, expect } from '@playwright/test';

test("drag and drop example", async ({ page }) => {
    await page.goto("https://testautomationpractice.blogspot.com/");
  
    // Locate the draggable element
    const draggable = await page.locator("#draggable");
    
    // Locate the droppable area
    const droppable = await page.locator("#droppable");
    
    // Perform the drag-and-drop action
    await draggable.dragTo(droppable);
    
  });

Drag and drop actions in Playwright provide a straightforward way to simulate user interactions and validate UI behavior effectively. With tools like Playwright, automating these tests becomes efficient, allowing teams to focus on building robust applications that meet user needs.

NOTES :

1. dragTo() handles the sequence of mousedown, mousemove, and mouseup events internally.
2. Make sure the elements are visible and interactable; if they're inside iframes or offscreen, you may need to scroll or wait for them.
3. You can also add delays or custom steps for more control if needed.