playwright [Feature] Support for touch events/gestures

Web apps running on touch devices (e.g, mobile and Surface) rely on touch gestures like swiping and pinching to zoom. While page.dispatchEvent can manufacture synthetic touch points, having a simpler API would improve the dev experience.

Scenarios

Two-finger pinch to zoom in/out on a particular element (e.g., canvas in Azure ML designer)
Verify that two-finger left/right swipe is not leading to go back/forward

Jul 10 '20 02:07 arjunattam

It would also be interesting a feature to tap on certain elements or coordinates as Puppeteer allowed. Simple code as: await page.tap('div.example) await element.tap()

Aug 14 '20 14:08 roune

+swipe

Feb 04 '21 13:02 olexandr13

+for swipe

Mar 22 '21 10:03 bonkalol

+1 swipe

Aug 03 '21 23:08 sergioariveros

is there some quick-access to achieve touch move in mobile, etc popup picker

Aug 06 '21 08:08 eJayYoung

Having the ability to swipe, dragto, or even replicate the mouse class for touchscreen would be great. If I could use the touchscreen class to move, press down, move, and unpress, it would take care of a lot of issues that I'm currently having with dragging elements.

Mar 04 '22 00:03 egreen0

I found this issue because I wanted to be able to drag an element using touch events as described in https://github.com/microsoft/playwright/issues/12599. It looks like I might be able to dispatch the events (see https://github.com/microsoft/playwright/issues/6072) but it'd be nice to just say "dragto" and have it do the proper touchstart, touchmove and touchend behaviors for me.

Mar 15 '22 19:03 blimmer

+1 for swipe action

May 10 '22 01:05 dk-carma

+1 for overall possibility to automate touch

May 12 '22 10:05 sijakret

+1 for overall possibility to automate touch

May 12 '22 10:05 mapau

+1 for native mobile gestures like swipe

Mar 06 '23 09:03 nnson0310

Is this experimental API (https://playwright.dev/docs/api/class-androidinput) an attempt to implement this feature? I didn't test it yet.

Mar 07 '23 12:03 MRamonLeon

+swipe

Tried a workaround with Touchevent, but I'm getting two touch points on the start and the end coordinates. Probably I messed up something.

        await page.evaluate(
            ([startX, startY, endX, endY]) => {
                const touchStartEvent = new TouchEvent("touchstart", {
                    bubbles: true,
                    cancelable: true,
                    composed: true,
                    touches: [new Touch({ identifier: 1, target: document.documentElement, clientX: startX, clientY: startY })],
                });
                document.elementFromPoint(startX, startY).dispatchEvent(touchStartEvent);

                const touchMoveEvent = new TouchEvent("touchmove", {
                    bubbles: true,
                    cancelable: true,
                    composed: true,
                    touches: [
                        new Touch({ identifier: 1, target: document.documentElement, clientX: startX, clientY: startY }),
                        new Touch({ identifier: 2, target: document.documentElement, clientX: endX, clientY: endY }),
                    ],
                });
                document.elementFromPoint(startX, startY).dispatchEvent(touchMoveEvent);

                const touchEndEvent = new TouchEvent("touchend", {
                    bubbles: true,
                    cancelable: true,
                    composed: true,
                    touches: [],
                });
                document.elementFromPoint(startX, startY).dispatchEvent(touchEndEvent);
            },
            [startX, startY, endX, endY]
        );