How to simulate a drag and drop action in puppeteer?

Question

I have React-DnD(Drag and drop) in my application. I'd like test it E2E.

What I want to simulate is drag a particular element and drop to a particular place. How do I do this?

What I have is:

//test.js
const mouse = page.mouse;
await mouse.down();
await mouse.move(126, 19);
await page.waitFor(400);

Using this code, selection is done but drag is not working. How should I implement this?

Answer 1

The following method will allow you to simulate a drag-and-drop action in Puppeteer:

const example = await page.$('#example');
const bounding_box = await example.boundingBox();

await page.mouse.move(bounding_box.x + bounding_box.width / 2, bounding_box.y + bounding_box.height / 2);
await page.mouse.down();
await page.mouse.move(126, 19);
await page.mouse.up();