Draggable doesn't recognize MouseEvent and dont work with Playwright

[AndreyMiloserdov]

trafficstars

For E2E we have to simulate DnD, and code

const triggerMouseEvent = (node: HTMLElement, eventType: string, data: { clientX: number; clientY: number }) => {
       const evt = new MouseEvent(eventType, data);
       node.dispatchEvent(evt);
};

triggerMouseEvent('mousedown', {clientX: 0, clientY: 0 });
triggerMouseEvent('mousemove', {clientX: 50, clientY: 0 });
triggerMouseEvent('mouseup', {clientX: 50, clientY: 0 });

Don't work, but

const triggerMouseEvent = (node: HTMLElement, eventType: string, data: { clientX: number; clientY: number }) => {
    const evt = document.createEvent('MouseEvents');

    evt.initMouseEvent(
        eventType,
        true,
        true,
        window,
        0,
        data.clientX,
        data.clientY,
        data.clientX,
        data.clientY,
        false,
        false,
        false,
        false,
        0,
        null,
    );

    node.dispatchEvent(evt);
};

triggerMouseEvent('mousedown', {clientX: 0, clientY: 0 });
triggerMouseEvent('mousemove', {clientX: 50, clientY: 0 });
triggerMouseEvent('mouseup', {clientX: 50, clientY: 0 });

Seem to be works fine! PS: I can't use TestUtils, because code above injected to the document via Playwright, and it should be 'clearable', without dependency links.

But! initMouseEvent is deprecated... and wanna have more actual solution

PS: The better if would work default playwright D'n'D code like

await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x + deltaX, y + deltaY);
await page.mouse.up();