[BUG] Can't drag element to various places

[sbmsr]

Issue Description: I am writing some tests for a kanban board app built with react. i have a test that verifies the following behavior doesn't occur:

test_against.this.behavior.mov

This involves dragging a task to a spot, then dragging it away from that spot, and then dropping it.

The issue i'm facing with playwright is that I am able to drag the task to the first spot, but i am unable to move away from it. However, If I remove the first mouse down event, i move as many times as i want. This leads me to believe that once I have triggered a mouse down event, I am only able to move once. Any further moves are not possible.

Video of moves without mousedown

without_mousedown.webm

Video of moves with mousedown

with_mousedown.webm

System info

• Playwright Version: 1.31.1
• Operating System: macOS 13.3.1
• Browser: All
• Other info:

Source code

• I provided exact source code that allows reproducing the issue locally.

Link to the GitHub repository with the repro

https://github.com/sbmsr/playwright-mousedown-issue

Steps

• run npm install
• run npm dev:client to start local vite server
• run npm dev:sever to start backend
• run npm test to run the tests
• comment the mouse.down on line 84, and view the video to see that the mouse moves fine without it

Expected

I expect the mouse to drag the task to two places on the screen.

Actual

The mouse drags the task to the first intended place, but not the second.

[yury-s]

Thanks for the report! It does look like there is a real bug here, but it is very hard to understand what's going on. We often spend days on these kinds of bugs that involve digging into large codebases. We don't know details of how your app it is handling the pointer location. Playwright behaves as a very fast user and there is a chance that the app handlers are not ready to that. Can you reduce the example to a minimal repro which would clearly show that it's a playwright bug rather than a problem in the app/libraries?

[sbmsr]

thank you Yury. I've simplified the repo to be plain jsx without interactivity/state:

<main className="overflow-x-auto">
  <h1 className="text-left text-4xl font-bold p-10 pb-0">Kanban Board</h1>
  <div className="flex p-10 gap-x-4 min-w-max">
    <div className="flex flex-col w-1/2 min-w-[300px] bg-gray-200 rounded p-4">
      <h2 className="font-bold mb-2">In Progress</h2>
      <ul>
        <li className={`bg-white p-2 rounded mb-2 shadow`} draggable>
          Test application
        </li>
      </ul>
    </div>
  </div>
</main>

I also updated the tests to manually drag the task to (0,500) and (500,500). With all of these changes, the issue still persists. You can run the repo yourself, or see my test recordings below.

with_mousedown.webm

without_mousedown.webm

[yury-s]

The example still depends on a heavy library which is probably buggy, e.g. if you make the following change to the code, the circle will not follow the mouse outside 'In progress' box:

diff --git a/test.js b/test.js
index 3b49310..8e36de3 100644
--- a/test.js
+++ b/test.js
@@ -9,6 +9,7 @@ let page;
 
 test.before(async () => {
   browser = await chromium.launch({
+    headless: false,
     use: { timezoneId: "Etc/UTC" },
   });
   context = await browser.newContext({
@@ -41,7 +42,7 @@ test("Make sure the application doesn't leave a lingering task when dragged over
   await taskToDrag.hover();
   await page.mouse.down();
   await setTimeout(1000);
-  await page.mouse.move(0, 500);
+  await page.mouse.move(0, 500, { steps: 10 });
   await page.mouse.move(0, 500);
   await setTimeout(1000);
   await page.mouse.move(500, 500);

Closing the issue as it looks like a problem with the library. If you think this is a Playwright bug, please file a new issue with a repro that would not depend on the library and instead include relevant bits of the js code which would make it clear what the problem is.