Playwright test drag

Question

I am working on this template where I am using dragTo() function for dragging and dropping. When I run my tests on headed mode, it works fine. But when I run the tests in headless mode, it simply wont drag anything and the test will pass with the page blank. Is there any way I can slow down the dragging so that the page could identify the dragged element before jumping onto the other action?

I tried adding timeout the following way but still no luck:

await this.page.locator('text=Column').first()
  .dragTo(this.page.locator('[role="tabpanel"]')
  .first(), {force:true}), {timeout:3000};

Answer 1

So, the only way I could make this work was using the following code:

async dragDrop(page: Page, originSelector: string, destinationSelector: string) {
    const originElement = await page.waitForSelector(originSelector);
    const destinationElement = await page.waitForSelector(destinationSelector);

    await originElement.hover();
    await page.mouse.down();
    const box = (await destinationElement.boundingBox())!;
    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
    await destinationElement.hover();
    await page.mouse.up();
}