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

Context:

• Playwright Version: 1.18.1
• Operating System: Mac
• Node.js version: 14
• Browser: Desktop Electron App (Electron version 13)
• Extra: Maybe issue is with this library - react-beautiful-dnd

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and that we can run and debug locally. For example:

  await page.dragAndDrop(`#Test123`, `#test124`)

Describe the bug Element is not dropped at the target location, but I do see some kind of fluctuation at source element. See attached video for reference.

https://www.loom.com/share/fd512a9448774a729cd8a1caeaa4fe01

[emanuellarini]

For those who might search for this… I have a working solution… keep in mind that you mind need to make adjustments in X and Y coordinates depending on your needs.

const dragAndDrop = (page, subjectSelector, targetSelector) => {
    const subjectElement = await page.waitForSelector(subjectSelector);
    const targetElement = await page.waitForSelector(targetSelector);
    
    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
    });
}

[johanlajili]

For those who might search for this… I have a working solution… keep in mind that you mind need to make adjustments in X and Y coordinates depending on your needs.

const dragAndDrop = (page, subjectSelector, targetSelector) => {
    const subjectElement = await page.waitForSelector(subjectSelector);
    const targetElement = await page.waitForSelector(targetSelector);
    
    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
    });
}

You beauty