How to Perform Drag and Drop in Playwright

Last updated on June 23rd, 2025 at 12:14 pm

This tutorial will guide you through performing drag and drop actions using Playwright. You’ll learn how to simulate drag and drop between elements with real-time examples and understand how it works in different test scenarios.

Modern web applications are filled with interactive features, such as drag-and-drop file uploads, sortable lists, pricing filters, Kanban boards, dashboard builders, and UI with rearrangeable elements. Automating these actions can be challenging if you’re not familiar with handling drag and drop in Playwright.

This tutorial will guide you through multiple methods for automating drag and drop scenarios using the Playwright automation framework, ensuring your tests cover these crucial user interactions.

In this guide, we will learn how to perform drag and drop in Playwright using the built-in dragTo() and dragAndDrop() methods. Additionally, we’ll explore how to simulate drag and drop using mouse movements for more advanced scenarios. After performing drag and drop actions, it’s equally important to verify whether the operation was successful. We will also cover different ways to assert and validate that the drag and drop action in Playwright has been executed correctly.

Drag and drop using the dragTo() Method in Playwright

The easiest and most reliable way to perform drag and drop in Playwright is by using the built-in dragTo() method. You simply need to locate the draggable element and specify the drop target. The playwright will handle the drag-and-drop action automatically using the dragTo() method.

Let us see how to perform drag and drop elements in playwright with an example.

Drag and drop example using the dragTo() method

const { test, expect } = require('@playwright/test');

test('Example: Drag and drop element using dragTo() method in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

  //Drag and drop element using gragTo() method.
  await page.locator('#dragdiv').dragTo(page.locator('#dropdiv'));
});

Code Breakdown

• locator(‘#dragdiv’): This statement locates the element with the ID dragdiv. In this example, this is the element we want to drag and drop in Playwright.
• dragTo(page.locator(‘#dropdiv’)): This statement locates the target element with the ID dropdiv and drops the draggable element onto it using the dragTo() method. This allows us to perform drag and drop in Playwright easily.

Before performing drag and drop in Playwright, you may need to ensure the elements are enabled. Learn how to wait for elements to be enabled in Playwright.

Drag and drop using the dragAndDrop() method in Playwright

The dragAndDrop() method is a great alternative to the dragTo() method in Playwright. You can use dragAndDrop() to perform drag and drop in Playwright by specifying the source element and the destination element. This method simplifies the process of dragging an element from its source location and dropping it onto the target element.

Make sure the source and target elements exist before starting the drag and drop in Playwright. You can verify element existence in Playwright using multiple methods.

The example below demonstrates how to perform drag and drop in Playwright using the dragAndDrop() method.

Drag and drop example using the dragAndDrop() method in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Drag and drop element using dragAndDrop() method in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

  //Drag and drop element using dragAndDrop() method.
  await page.dragAndDrop('#dragdiv', '#dropdiv');
});

Code Breakdown

• dragAndDrop(‘#dragdiv’, ‘#dropdiv’): This command will drag the element with ID dragdiv and drop it onto the element with ID dropdiv.

Perform drag and drop using mouse simulation in Playwright

Sometimes, the built-in methods may not work for certain complex scenarios. In such cases, you can perform drag and drop in Playwright using mouse simulation. Playwright provides powerful mouse event handling, allowing you to automate the drag and drop action by simulating user interactions.

Sometimes, scrolling may be required before performing drag and drop in Playwright. Here’s how to scroll in Playwright.

In the following example, we’ll see how to use mouse simulation to perform drag and drop in Playwright.

Drag and drop example using mouse simulation in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Drag and drop element using mouse simulation in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

  //Locate drag to and drop at elements
  const draggable = page.locator('#dragdiv');
  const droppable = page.locator('#dropdiv');

  //Perform drag and drop operation by simulating mouse movements.
  await draggable.hover();
  await page.mouse.down();
  await droppable.hover();
  await page.mouse.up();
});

Code Breakdown

• page.locator(‘#dragdiv’): This statement locates the draggable element with the ID dragdiv.
• page.locator(‘#dropdiv’): This statement locates the target element with the ID dropdiv where the draggable element will be dropped.
• draggable.hover(): Moves the mouse over the draggable element to simulate hovering before starting the drag action.
• page.mouse.down(): Simulates pressing the mouse button down (starts the drag operation).
• droppable.hover(): Moves the mouse over the droppable (target) element to position it for dropping.
• page.mouse.up(): Simulates releasing the mouse button (completes the drop operation).

Drag and drop element With Exact Coordinates in Playwright

If you want to drag an element from specific X, Y coordinates and drop it at specific X, Y coordinates, you can use the dragTo() method by providing the offset values. Playwright will perform drag and drop in Playwright based on the given coordinates, allowing you to handle more precise drag and drop actions.

Now, let’s look at an example of how to perform drag and drop in Playwright using specific X and Y coordinates for precise control.

Perform drag and drop with exact coordinates in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Drag and drop element With Exact Coordinates in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

    //Drag and drop element at exact coordinates.  
    await page.locator('#dragdiv').dragTo(page.locator('#dropdiv'), {
    sourcePosition: { x: 10, y: 10 },
    targetPosition: { x: 20, y: 20 }
  });
});

Code Breakdown

• page.locator(‘#dragdiv’): Locates the draggable element with ID dragdiv.
• .dragTo(page.locator(‘#dropdiv’), {…}): Performs the drag and drop operation on the located elements.
• sourcePosition: { x: 10, y: 10 }: Specifies the exact starting point (offset) inside the draggable element where the drag will begin.
• targetPosition: { x: 20, y: 20 }: Specifies the exact point inside the target element dropdiv where the draggable element will be dropped.

This allows you to perform drag and drop in Playwright with precise control over where the drag starts and ends inside both elements.

Drag and drop with delay in Playwright

In some situations, you may need to customize the drag and drop behavior in Playwright. The dragTo() method allows you to pass additional options such as force, noWaitAfter, and timeout to handle tricky scenarios. This can be helpful if the draggable element is not fully interactable, if the page triggers events after the drop, or if you want to control how long Playwright waits before failing.

const { test, expect } = require('@playwright/test');

test('Example: Drag and drop element With delay in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

  //Drag and drop element with delay.  
  await page.locator('#dragdiv').dragTo(page.locator('#dropdiv'), {
    force: true,
    noWaitAfter: false,
    timeout: 5000
  });
});

Code Breakdown

• page.locator(‘#dragdiv’): Finds the draggable element with ID dragdiv.
• .dragTo(page.locator(‘#dropdiv’), {…}): Drags the element to the drop target with ID dropdiv.
• force: true: Forces the drag action even if the element is not in an interactable state (like hidden, overlapped, or disabled).
• noWaitAfter: false: Instructs Playwright to wait for any navigation or page events triggered after the action. (In most drag and drop, this can safely remain false.)
• timeout: 5000: Sets a timeout of 5000 ms (5 seconds) for the entire drag operation to complete. If it takes longer, Playwright will throw an error.

Assert drag and drop in Playwright

After performing drag-and-drop operations in Playwright, it is essential to verify and assert that the operation was completed successfully. You can easily perform this validation using Playwright’s built-in assertion methods.

Let us see how to verify and assert drag and drop in Playwright with an example.

Example to assert drag and drop in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Verify/Assert drag and drop element in playwright.', async ({ page }) => {
  await page.goto('http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html');

  //Drag and drop element using gragTo() method.
  await page.locator('#dragdiv').dragTo(page.locator('#dropdiv'));

  //Verify drag and drop result using toContainText() method.
  await expect(page.locator('#dropdiv')).toContainText('Dropped!');
});

Code Breakdown

• page.locator(‘#dragdiv’).dragTo(….): This statement will perform drag and drop operation.
• expect(page.locator(‘#dropdiv’)).toContainText(‘Dropped!’): This assertion verifies that the element with ID dropdiv contains the text ‘Dropped!’. It confirms that the drag and drop in the Playwright operation was completed.

Final Thoughts

Handling drag and drop in Playwright is quite straightforward with the help of built-in methods like dragTo() and dragAndDrop(). For more complex scenarios, Playwright also allows simulating mouse events and using coordinate-based drag and drop operations. Additionally, verifying the success of the drag and drop operation using Playwright’s built-in assertions ensures your tests are reliable and accurate. By using these techniques, you can easily automate drag-and-drop functionality across a wide range of modern web applications.

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.