Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update examples to actually move

Browse source
This commit is contained in:
Yury Semikhatsky 2025-01-03 11:21:53 -08:00
parent 5a20e08aa8
commit 16a9085738
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
docs/src/touch-events.md
View file

@ -18,7 +18,7 @@ You can dispatch touch events to the page using [`method: Locator.dispatchEvent`
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. 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.
```js ```js
import { test, expect, devices, Locator } from '@playwright/test'; import { test, expect, devices, type Locator } from '@playwright/test';
test.use({ ...devices['Pixel 7'] }); test.use({ ...devices['Pixel 7'] });
@ -41,7 +41,7 @@ async function pan(locator: Locator, deltaX?: number, deltaY?: number, steps?: n
steps = steps ?? 5; steps = steps ?? 5;
deltaX = deltaX ?? 0; deltaX = deltaX ?? 0;
deltaY = deltaY ?? 0; deltaY = deltaY ?? 0;
for (let i = 0; i <= steps; i++) { for (let i = 1; i <= steps; i++) {
const touches = [{ const touches = [{
identifier: 0, identifier: 0,
clientX: centerX + deltaX * i / steps, clientX: centerX + deltaX * i / steps,
@ -71,7 +71,7 @@ test(`pan gesture to move the map`, async ({ page }) => {
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. 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.
```js ```js
import { test, expect, devices, Locator } from '@playwright/test'; import { test, expect, devices, type Locator } from '@playwright/test';
test.use({ ...devices['Pixel 7'] }); test.use({ ...devices['Pixel 7'] });
@ -83,37 +83,37 @@ async function pinch(locator: Locator, arg: { deltaX?: number, deltaY?: number,
return { centerX, centerY }; return { centerX, centerY };
}); });
const deltaX = arg.deltaX ?? 0; const deltaX = arg.deltaX ?? 50;
const deltaY = arg.deltaY ?? 0; const steps = arg.steps ?? 5;
const stepDeltaX = deltaX / (steps + 1);
// Two touch points equally distant from the center of the element. // Two touch points equally distant from the center of the element.
const touches = [ const touches = [
{ {
identifier: 0, identifier: 0,
clientX: centerX + (arg.direction === 'in' ? - deltaX : -10), clientX: centerX - (arg.direction === 'in' ? deltaX : stepDeltaX),
clientY: centerY, clientY: centerY,
}, },
{ {
identifier: 1, identifier: 1,
clientX: centerX + (arg.direction === 'in' ? deltaX : 10), clientX: centerX + (arg.direction === 'in' ? deltaX : stepDeltaX),
clientY: centerY, clientY: centerY,
}, },
]; ];
await locator.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); await locator.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches });
// Move the touch points towards or away from each other. // Move the touch points towards or away from each other.
const steps = arg.steps ?? 5; for (let i = 1; i <= steps; i++) {
for (let i = 0; i < steps; i++) {
const touches = [ const touches = [
{ {
identifier: 0, identifier: 0,
clientX: centerX + deltaX * i / steps + (arg.direction === 'in' ? - deltaX : 0), clientX: centerX - (arg.direction === 'in' ? (deltaX - i * stepDeltaX) : (stepDeltaX * (i + 1))),
clientY: centerY + deltaY * i / steps + (arg.direction === 'in' ? - deltaY : 0), clientY: centerY,
}, },
{ {
identifier: 0, identifier: 0,
clientX: centerX - deltaX * i / steps + (arg.direction === 'in' ? deltaX : 0), clientX: centerX + (arg.direction === 'in' ? (deltaX - i * stepDeltaX) : (stepDeltaX * (i + 1))),
clientY: centerY - deltaY * i / steps + (arg.direction === 'in' ? deltaY : 0), clientY: centerY,
}, },
]; ];
await locator.dispatchEvent('touchmove', { touches, changedTouches: touches, targetTouches: touches }); await locator.dispatchEvent('touchmove', { touches, changedTouches: touches, targetTouches: touches });