|
1 | 1 | ---
|
2 | 2 | id: touch-events
|
3 |
| -title: "Emulating touch events" |
| 3 | +title: "Emulating legacy touch events" |
4 | 4 | ---
|
5 | 5 | import Tabs from '@theme/Tabs';
|
6 | 6 | import TabItem from '@theme/TabItem';
|
7 | 7 | import HTMLCard from '@site/src/components/HTMLCard';
|
8 | 8 |
|
9 | 9 | ## Introduction
|
10 | 10 |
|
11 |
| -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 [locator.evaluate()](/api/class-locator.mdx#locator-evaluate). |
| 11 | +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 [locator.dispatchEvent()](/api/class-locator.mdx#locator-dispatch-event) and pass [Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch) points as arguments. |
12 | 12 |
|
13 |
| -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 [locator.click()](/api/class-locator.mdx#locator-click) and raw [`Mouse`] events to simulate a single-finger touch, and this will trigger all the same pointer events. |
14 |
| - |
15 |
| -### Dispatching TouchEvent |
16 |
| - |
17 |
| -You can dispatch touch events to the page using [locator.dispatchEvent()](/api/class-locator.mdx#locator-dispatch-event). [Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch) points can be passed as arguments, see examples below. |
18 |
| - |
19 |
| -#### Emulating pan gesture |
| 13 | +### Emulating pan gesture |
20 | 14 |
|
21 | 15 | 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.
|
22 | 16 |
|
@@ -72,7 +66,7 @@ test(`pan gesture to move the map`, async ({ page }) => {
|
72 | 66 | });
|
73 | 67 | ```
|
74 | 68 |
|
75 |
| -#### Emulating pinch gesture |
| 69 | +### Emulating pinch gesture |
76 | 70 |
|
77 | 71 | 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.
|
78 | 72 |
|
|
0 commit comments