Search code examples
fabricjsui-automationbrowser-automationplaywright

How to move Fabricjs objects with Playwright framework

I have a fabricjs object on the canvas in my project. In my UI tests, I'm using Playwright's built-in mouse methods to move this object.

I.e., I have an object on (400, 400). Using the next sequence of commands I'm expecting that my object moved to 400 points in the right direction.

await page.mouse.move(400, 400);
await page.mouse.down;
await page.mouse.move(800, 400);
await page.mouse.up();

However, it only selects the object but does not move it. I can move the object using a keyboard (keyboard.down, keyboard.press('ArrowRight'), etc), and select it by mouse.click(400, 400), but I'm not able to move it.

Solution

  • Finally, I found a solution. All you need is the option "steps" in the "mouse.move" method. I think it is because the web driver needs some time to move objects on the canvas. With the "steps" the option movement is not instantly, but more realistic.

    await page.mouse.down;
await page.mouse.move(800, 400, { steps: 20 });
await page.mouse.up();