feat: add the `page.touchscreen.swipe` method

[PupilTong]

https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchTouchEvent

Implement it for chromium only since it could using dispatchTouchEvent to invoke scroll.

Tried firefox but it doesn't work.

#2903

[github-actions[bot]]

Test results for "tests 1"

2 fatal errors, not part of any test 6 passed :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[PupilTong]

@PupilTong please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree company="Bytedance"

[github-actions[bot]]

Test results for "tests 1"

3 fatal errors, not part of any test 17 failed :x: [chromium-page] › page/swipe.spec.ts:39:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:46:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:58:3 › should invoke touch events :x: [chromium-page] › page/swipe.spec.ts:39:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:46:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:58:3 › should invoke touch events :x: [chromium-page] › page/swipe.spec.ts:39:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:46:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:58:3 › should invoke touch events :x: [playwright-test] › expect.spec.ts:251:5 › should work with default expect matchers and esModuleInterop=false :x: [chromium-page] › page/swipe.spec.ts:39:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:46:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:58:3 › should invoke touch events :x: [playwright-test] › expect.spec.ts:251:5 › should work with default expect matchers and esModuleInterop=false :x: [playwright-test] › expect.spec.ts:251:5 › should work with default expect matchers and esModuleInterop=false :x: [playwright-test] › expect.spec.ts:251:5 › should work with default expect matchers and esModuleInterop=false :x: [playwright-test] › expect.spec.ts:251:5 › should work with default expect matchers and esModuleInterop=false

27105 passed, 672 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

3 fatal errors, not part of any test 15 passed :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

12 failed :x: [chromium-page] › page/swipe.spec.ts:25:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:32:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:44:3 › should invoke touch events :x: [chromium-page] › page/swipe.spec.ts:25:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:32:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:44:3 › should invoke touch events :x: [chromium-page] › page/swipe.spec.ts:25:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:32:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:44:3 › should invoke touch events :x: [chromium-page] › page/swipe.spec.ts:25:3 › should work on scroll container :x: [chromium-page] › page/swipe.spec.ts:32:3 › should work for fling gesture :x: [chromium-page] › page/swipe.spec.ts:44:3 › should invoke touch events

3 flaky

:warning: [firefox-library] › library/browsercontext-reuse.spec.ts:86:1 › should reset serviceworker that hangs in importScripts
:warning: [firefox-page] › page/page-goto.spec.ts:81:3 › should work with Cross-Origin-Opener-Policy
:warning: [webkit-page] › page/page-goto.spec.ts:277:3 › should fail when navigating to bad SSL after redirects

27246 passed, 677 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

27261 passed, 677 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[PupilTong]

https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture This CDP method cannot scroll a container on xvfb headless chromium with gestureSourceType:'touch'. It might only works on a device with a screen. Also, this 'dispatchtouch' implementation is tried in Firefox. But it cannot scroll a container neither.

[github-actions[bot]]

Test results for "tests 1"

1 flaky

:warning: [webkit-library] › library/browsercontext-clearcookies.spec.ts:92:3 › should remove cookies by domain

27260 passed, 677 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[PupilTong]

Thank you for the PR! Unfortunately, we cannot make this a Chromium-only feature, it has to work in all three browser engines.

How about expose the Input.dispatchTouchEvent ? For example, add a page.touchscreen.touch() therefore we could create the swipe wrapper by ourselves.

The firefox also implemented this CDP method.

Just like the page.mouse.wheel(), it is supported by chromium and firefox.

[PupilTong]

Thank you for the PR! Unfortunately, we cannot make this a Chromium-only feature, it has to work in all three browser engines.

How about expose the Input.dispatchTouchEvent ? For example, add a page.touchscreen.touch() therefore we could create the swipe wrapper by ourselves.

The firefox also implemented this CDP method.

Just like the page.mouse.wheel(), it is supported by chromium and firefox.

kindly ping @dgozman ;-)

[dgozman]

How about expose the Input.dispatchTouchEvent ? For example, add a page.touchscreen.touch() therefore we could create the swipe wrapper by ourselves.

I am not really sure what you mean by "exposing Input.dispatchTouchEvent". Could you please elaborate?

Just like the page.mouse.wheel(), it is supported by chromium and firefox.

Generally, Playwright APIs should be supported by chromium, firefox and webkit.

[PupilTong]

How about expose the Input.dispatchTouchEvent ? For example, add a page.touchscreen.touch() therefore we could create the swipe wrapper by ourselves.

I am not really sure what you mean by "exposing Input.dispatchTouchEvent". Could you please elaborate?

Just like the page.mouse.wheel(), it is supported by chromium and firefox.

Generally, Playwright APIs should be supported by chromium, firefox and webkit.

@dgozman

• expose the CDP method 'Input.dispatchTouchEvent'

Both the firefox and the chromium support this CDP method. I can submit another PR, create a Playwright method like page.touchscreen.touch() as a wrapper of the CDP method. Therefore developers are able to create their own swipe() method based on it.

• About the compatibility

Currently Playwright already have a method ,page.mouse.wheel(), which cannot be called for webkit running env. I think this means if a new method only support chromium and firefox may be accepted. Considering the Safari team's attitude about the touch-related feature on desktop safari (They even do not provide the TouchEvent on the desktop safari.), I guess add a touchscreen method for playwright without safari support is reasonable.

[dgozman]

@PupilTong Thank you for the answers!

If you believe that developers can implement swipe() based on exposed dispatchTouchEvent in Firefox, then you should be able to do the same. Therefore, I'd prefer to stick with touchscreen.swipe() API as in this PR.

As for compatibility, our goal is cross-browser support where possible. For example, we support touchscreen.tap() on every browser where hasTouch option was set. In contrast, mouse.wheel() is not supported in mobile webkit because there is no real mouse on devices with mobile webkit browsers, however mouse.wheel() is supported in desktop webkit.

Overall, the approach you take in this PR is a good one. Unfortunately, this feature most likely requires some work in the browser engines themselves, so it is not that straightforward to implement.

As a workaround for now, we recommend using locator.dispatchEvent() method and issue some specific events like touchstart/touchmove/touchend. This is not the real swipe, but it is something useful today. See also #6072.

[PupilTong]

@PupilTong Thank you for the answers!

If you believe that developers can implement swipe() based on exposed dispatchTouchEvent in Firefox, then you should be able to do the same. Therefore, I'd prefer to stick with touchscreen.swipe() API as in this PR.

As for compatibility, our goal is cross-browser support where possible. For example, we support touchscreen.tap() on every browser where hasTouch option was set. In contrast, mouse.wheel() is not supported in mobile webkit because there is no real mouse on devices with mobile webkit browsers, however mouse.wheel() is supported in desktop webkit.

Overall, the approach you take in this PR is a good one. Unfortunately, this feature most likely requires some work in the browser engines themselves, so it is not that straightforward to implement.

As a workaround for now, we recommend using locator.dispatchEvent() method and issue some specific events like touchstart/touchmove/touchend. This is not the real swipe, but it is something useful today. See also #6072.

Thanks for your answer!

Let me explain why the dispatchEvent is not enough to use. The locator.dispatchEvent() cannot meet our requirements. It requires to "locate a dom". But for e2e tests, typically we have to send events based on the x&y position to test the gestures implementation.

I'll spend some time for Firefox about this.

For Safari, it seems they requires developers to use their emulator to test touch gestures. https://developer.apple.com/documentation/safari-developer-tools/inspecting-ios I don't know if it could be implemented.

[pavelfeldman]

Let me archive this for now, please feel free to re-post and link to this PR.