[Feature] Support for touch events/gestures

[arjunattam]

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

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

[roune]

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()

[olexandr13]

+swipe

[bonkalol]

+for swipe

[sergioariveros]

+1 swipe

[eJayYoung]

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

[egreen0]

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.

[blimmer]

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

[dk-carma]

+1 for swipe action

[sijakret]

+1 for overall possibility to automate touch

[mapau]

+1 for overall possibility to automate touch

[nnson0310]

+1 for native mobile gestures like swipe

[MRamonLeon]

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

[Orbisti]

+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]
        );

[RatexMak]

+1 for simulating long press on mobile device

[Exordio]

damn this is really needed. Please implement this :)

[cctui-dev]

+1 for swipe/touch events please :)

[ant0d0v]

+1 for swipe

[Mark-770]

+1 for swipe

[artus9033]

+1 for swipe

[Kostya4ki]

+1 for all mobile gestures

[agray]

+1 swipe!

[dr3adx]

playwright devs lazy as fuk, still not added after 3 years

[MillerSvt]

+1

[ml4725]

+1 for simulating long press on mobile device

[IPRIT]

+1

[GarimaGuptaRDC]

+1 for swipe/touch

[ml4725]

Wasn't this requirement raised three years ago? Are you really not planning to do it? After all, Selenium supports it.

[xaker01]

+1 swipe

[PupilTong]

Tried on chrome 124, Windows 10.
https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-emulateTouchFromMouseEvent
This CDP API could mock the touch input to invoke scrolling by touch/touchmove.
I plan to add some methods to the page.touchscreen as wrappers of the emulateTouchFromMouseEvent.
It may help us to emulate the swipe/fling gesture.
It will be 1-2 weeks for me to walk through the playwright code and find a way to implement it.

[PupilTong]

Tried on chrome 124, Windows 10. https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-emulateTouchFromMouseEvent This CDP API could mock the touch input to invoke scrolling by touch/touchmove. I plan to add some methods to the page.touchscreen as wrappers of the emulateTouchFromMouseEvent. It may help us to emulate the swipe/fling gesture. It will be 1-2 weeks for me to walk through the playwright code and find a way to implement it.

Input.synthesizeScrollGesture works. Now I'm going to implement page.touchscreen.scroll first.

it('should work on scroll container', async ({ page, server }) => {
  const client = await page.context().newCDPSession(page);
  await page.setContent(`<div id="container" style="width: 500px; height: 500px; overflow-y:scroll;"><div style="width:100%; height:200%;"></div></div>`);
  await client.send('Input.synthesizeScrollGesture', {
    x: 10,
    y: 200,
    xDistance: 0,
    yDistance: -100,
    preventFling: true
  })
  expect(await page.$eval('#container', e => e.scrollTop)).toBe(100);
});

[PupilTong]

I've submitted a PR for the page.touchscreen.swipe.