[Feature]: Subscribe to arbitrary event bindings

[Michael Render]

🚀 Feature Request

The ability to subscribe to arbitrary events, which would parallel the node.js implementation of page.on/page.off/page.once

Example

private static async Task DragToTheRight(IPage page, ILocator element, int steps)
{
    int x = -1;
    int y = -1;

    page.OnAsync("mousemove", CaptureCoordinates);

    await element.HoverAsync().ConfigureAwait(false);

    int pinX = x;
    int pinY = y;

    await page.Mouse.DownAsync().ConfigureAwait(false);
    await page.Mouse.MoveAsync(pinX * steps, pinY, new() { Steps = steps, }).ConfigureAwait(false);
    await page.Mouse.UpAsync().ConfigureAwait(false);

    void CaptureCoordinates(JsonElement args)
    {
        x = args["clientX"];
        y = args["clientY"];
    }
}

Motivation

I'm trying to implement a feature where I drag a slider a certain number of paces to the right. Playwright has support for dragging an element to another element, but not in an arbitrary direction. Seeing commentary in issues like microsoft/playwright#13109, I doubt support would be added for relative mouse coordinates.

Hence, I'm trying to do it manually, and I would like access to the raw mousemove event for this.

[Max Schmitt]

The Node.js implementation of Playwright does not support arbitrary events. Only "Playwright events" are supported here. They need to be manually dispatched from the browser side to the Node.js side, via e.g. exposeBinding. See a full list here of Playwright events on a Page instance.

[Michael Render]

I see. Looking at the documentation for exposeBinding, it looks like its designed to inject HTML into the DOM, and wouldn't work for the mousemove scenario I laid out.

Is there a way around this? Or rather, to avoid an XY problem, is there any support for dragging a slider a certain number of paces to the left or the right?

[Max Schmitt]

(It's designed to expose functions into the browser which when you call them (from the browser) get invoked on the Node.js side.)

You could do something like that and wrap it inside a small function like we do in some of our tests: https://github.com/microsoft/playwright/blob/81e907f4c158502118e79f6045a115a50c4019d3/tests/library/inspector/cli-codegen-1.spec.ts#L754-L762

Does your element look like that?

<input type="range" min="0" max="10" value="5">