diff --git a/docs/src/api/class-locator.md b/docs/src/api/class-locator.md index 0fdb1d1229..85e3f0396a 100644 --- a/docs/src/api/class-locator.md +++ b/docs/src/api/class-locator.md @@ -2332,7 +2332,7 @@ This method expects [Locator] to point to an ## async method: Locator.tap * since: v1.14 -Perform a tap gesture on the element matching the locator. +Perform a tap gesture on the element matching the locator. For examples of emulating other gestures by manually dispatching touch events, see the [emulating legacy touch events](../touch-events.md) page. **Details** diff --git a/docs/src/api/class-touchscreen.md b/docs/src/api/class-touchscreen.md index bd6e1ed9f0..d7871addd7 100644 --- a/docs/src/api/class-touchscreen.md +++ b/docs/src/api/class-touchscreen.md @@ -4,6 +4,8 @@ The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. +This class is limited to emulating tap gestures. For examples of other gestures simulated by manually dispatching touch events, see the [emulating legacy touch events](../touch-events.md) page. + ## async method: Touchscreen.tap * since: v1.8 diff --git a/docs/src/touch-events.md b/docs/src/touch-events.md index a1d394dc62..de42abac7a 100644 --- a/docs/src/touch-events.md +++ b/docs/src/touch-events.md @@ -1,19 +1,13 @@ --- id: touch-events -title: "Emulating touch events" +title: "Emulating legacy touch events" --- ## Introduction -Mobile web sites may listen to [touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) and react to user touch gestures such as swipe, pinch, tap etc. To test this functionality you can manually generate [TouchEvent]s in the page context using [`method: Locator.evaluate`]. +Web applications that handle [touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) to respond to gestures like swipe, pinch, and tap can be tested by manually dispatching [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/TouchEvent)s to the page. The examples below demonstrate how to use [`method: Locator.dispatchEvent`] and pass [Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch) points as arguments. -If your web application relies on [pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) instead of touch events, you can use [`method: Locator.click`] and raw [`Mouse`] events to simulate a single-finger touch, and this will trigger all the same pointer events. - -### Dispatching TouchEvent - -You can dispatch touch events to the page using [`method: Locator.dispatchEvent`]. [Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch) points can be passed as arguments, see examples below. - -#### Emulating pan gesture +### Emulating pan gesture In the example below, we emulate pan gesture that is expected to move the map. The app under test only uses `clientX/clientY` coordinates of the touch point, so we initialize just that. In a more complex scenario you may need to also set `pageX/pageY/screenX/screenY`, if your app needs them. @@ -69,7 +63,7 @@ test(`pan gesture to move the map`, async ({ page }) => { }); ``` -#### Emulating pinch gesture +### Emulating pinch gesture In the example below, we emulate pinch gesture, i.e. two touch points moving closer to each other. It is expected to zoom out the map. The app under test only uses `clientX/clientY` coordinates of touch points, so we initialize just that. In a more complex scenario you may need to also set `pageX/pageY/screenX/screenY`, if your app needs them. diff --git a/packages/playwright-client/types/types.d.ts b/packages/playwright-client/types/types.d.ts index ff2ef43aa1..72c502d913 100644 --- a/packages/playwright-client/types/types.d.ts +++ b/packages/playwright-client/types/types.d.ts @@ -14426,7 +14426,8 @@ export interface Locator { }): Promise; /** - * Perform a tap gesture on the element matching the locator. + * Perform a tap gesture on the element matching the locator. For examples of emulating other gestures by manually + * dispatching touch events, see the [emulating legacy touch events](https://playwright.dev/docs/touch-events) page. * * **Details** * @@ -21310,6 +21311,9 @@ export interface Selectors { /** * The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on * the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. + * + * This class is limited to emulating tap gestures. For examples of other gestures simulated by manually dispatching + * touch events, see the [emulating legacy touch events](https://playwright.dev/docs/touch-events) page. */ export interface Touchscreen { /** diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index ff2ef43aa1..72c502d913 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -14426,7 +14426,8 @@ export interface Locator { }): Promise; /** - * Perform a tap gesture on the element matching the locator. + * Perform a tap gesture on the element matching the locator. For examples of emulating other gestures by manually + * dispatching touch events, see the [emulating legacy touch events](https://playwright.dev/docs/touch-events) page. * * **Details** * @@ -21310,6 +21311,9 @@ export interface Selectors { /** * The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on * the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. + * + * This class is limited to emulating tap gestures. For examples of other gestures simulated by manually dispatching + * touch events, see the [emulating legacy touch events](https://playwright.dev/docs/touch-events) page. */ export interface Touchscreen { /**