[BUG] dragTo is not working with react-beautiful-dnd

[fdm-mateco]

Version

1.51.0

Steps to reproduce

Run the code at: https://try.playwright.tech/?l=playwright-test&s=d1t6za3
Or just copy paste this in any test setup you have locally:

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

test('drag and drop', async ({ page }) => {
  await page.goto('https://kitchen.applitools.com/ingredients/drag-and-drop');

  // HTML drag&drop works:
  const htmlSource = page.locator('#menu-hamburger');
  const htmlTarget = page.locator('#plate-items')
  await htmlSource.dragTo(htmlTarget);
  await expect(htmlTarget).toHaveText('Hamburger');

  // React drag&drop does not:
  const firstElement = page.locator('#drag-drop-react li').first();
  await expect(firstElement).toHaveText('Sweet Potatoes');
  const source = page.locator('#sides-sweet-potatoes');
  const target = page.locator('#sides-baked-beans');
  await source.dragTo(target);
  await expect(firstElement).toHaveText('Corn on the cob');
});

Expected behavior

The drag and drop works, leaving the element at the 4th position

Actual behavior

The element stays in its original position.

Additional context

This was reported a long time ago but with no reproducible example: #13855
Furthermore, workarounds were posted but they don't work for me.

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i9-13900H
    Memory: 41.86 GB / 63.66 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.99.3 - C:\Users\FrederikDeMets\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  npmPackages:
    @playwright/test: 1.51.0 => 1.51.0

[agg23]

What is not working about the posted workarounds? Looking at your specific example, the page is never setting draggable="true" on any of the elements, so drag events are not emitted. Instead, it's relying on manual element positioning through transforms as you move your cursor after a mousedown.

Playwright by default does not interpolate moves; it starts at one position and jumps to the final position directly. The workarounds posted in the linked issue instruct you to add the steps property to the move action and set it to some reasonably high number so the interpolation satisfies react-dnd. I see no reason why this wouldn't work in your case.

[fdm-mateco]

I copy/pasted the most upvoted solution here and it still doesn't work.

[agg23]

You need to scroll the elements you're dragging into view. In this case, scrolling to the target element will put them both in view, allowing the workaround to operate properly. Your test should be:

test('drag and drop', async ({ page }) => {
  await page.goto('https://kitchen.applitools.com/ingredients/drag-and-drop');

  // HTML drag&drop works:
  const htmlSource = page.locator('#menu-hamburger');
  const htmlTarget = page.locator('#plate-items')
  await htmlSource.dragTo(htmlTarget);
  await expect(htmlTarget).toHaveText('Hamburger');

  // React drag&drop does not:
  const firstElement = page.locator('#drag-drop-react li').first();
  await expect(firstElement).toHaveText('Sweet Potatoes');
  const source = page.locator('#sides-sweet-potatoes');
  const target = page.locator('#sides-baked-beans');
  await dragAndDrop(page, '#sides-sweet-potatoes', '#sides-baked-beans');

  // You were missing a capitol C below
  await expect(firstElement).toHaveText('Corn on the Cob');
});

const dragAndDrop = async (page, subjectSelector, targetSelector) => {
    const subjectElement = await page.waitForSelector(subjectSelector);
    const targetElement = await page.waitForSelector(targetSelector);

    // I added this line to the snippet
    await targetElement.scrollIntoViewIfNeeded();
    
    const subjectElementBound = await subjectElement.boundingBox();
    const targetElementBound = await targetElement.boundingBox();

    await page.mouse.move(
      subjectElementBound.x,
      subjectElementBound.y,
      { steps: 10 } // this is the most important part!
    );

    await page.dispatchEvent(
      subjectSelector,
      'mousedown',
      {
        button: 0,
        force: true
      }
    );
   
    // the x and y below is up to you to determine, in my case it was a checkers game so I needed to calculate a bit
    // if you are using with lists, you might try and consider the numbers below.. 
   
    const x = targetElementBound.x + targetElementBound.width / 2;
    const y = targetElementBound.y + targetElementBound.height / 2;

    // steps are needed here as well
    await page.mouse.move(x, y, { steps: 10 }); 

    await page.dispatchEvent(targetSelector, 'mouseup', {
      button: 0
    });
}

[fdm-mateco]

Wow, I missed the scrolling bit. Thanks!