arrow-left Back to topicQuizTouch events (legacy)Check yourself1.You're testing a mobile swipe widget. You call locator.dispatchEvent('touchstart') without extra arguments, then 'touchmove', then 'touchend', but the widget doesn't respond. What's most likely missing?dispatchEvent doesn't support touch events — use page.touchscreen.tap() insteadThe touch event needs Touch point data as the second argument: { touches: [{ identifier: 0, clientX: ..., clientY: ... }], changedTouches: [...], targetTouches: [...] } — without coordinates the widget receives touchstart but can't tell where the touch isYou need to set hasTouch: true in the test config for touch events to fireTouch events require enabling experimental flags in the browser context2.Your app uses modern Pointer Events (not legacy Touch Events) for its swipe gesture. You want to test the swipe in a mobile device emulation. What's the simplest approach?Use locator.dispatchEvent('pointerdown') then 'pointermove' then 'pointerup' with coordinate dataSet test.use({ ...devices['Pixel 7'] }) and use locator.tap() or mouse drag — Playwright translates these to Pointer Events automatically with hasTouch: trueUse page.touchscreen API — it handles both Pointer Events and Touch Events automaticallyPointer Events can't be tested in Playwright — only Touch Events can be dispatched manually3.In the pan gesture helper, why does the code call locator.evaluate(target => target.getBoundingClientRect()) at the start?To verify the element is visible before dispatching eventsTo get the element's pixel position in the viewport so touch coordinates (clientX/clientY) can be computed relative to its centerTo check the element's dimensions before deciding the swipe distancedispatchEvent requires the target's bounding rect as a required parameter4.A pinch-in gesture starts with two touch points far apart and moves them toward each other. How many touch points does each touchmove event in a pinch need?One — the primary touch point onlyTwo — both touch points must be updated simultaneously in each touchmove eventOne per event — alternate which touch point moves in each stepThree — two fingers and the center contact point5.After dispatching touch events via dispatchEvent, why might the gesture work in a real mobile browser but fail in your test, even though events are firing?Playwright runs tests too fast — add artificial delays between touch eventsdispatchEvent sets Event.isTrusted to false — if the app checks isTrusted to detect automation, it will ignore the touch eventsPlaywright doesn't support multi-step touch sequences on non-mobile browsersThe touch events need to be dispatched on the document, not on specific elements6.For the touchend event at the end of a pan gesture, what should the touches list contain?The final position of the touch pointAn empty array — touches lists all currently active touches, and after touchend there are noneThe same touch point as touchstart for referencetouchend doesn't need a touches property at all7.When should you use locator.tap() instead of manually dispatching touch events?Always — locator.tap() is more reliable than dispatchEvent for all touch scenariosWhen the app uses Pointer Events or standard click handlers — tap() sends a real tap through the browser's pointer dispatch, not a synthetic touch eventOnly for button clicks — use dispatchEvent for all other interactionstap() and dispatchEvent are equivalent — choose based on personal preference8.You need to simulate a swipe that starts at the center of a map element and moves 200px to the right. How do you compute the starting clientX coordinate?Use 200 as clientX — coordinates are relative to the element's top-left cornerGet the element's bounding rect via locator.evaluate(el => el.getBoundingClientRect()), then compute bounds.left + bounds.width / 2Use page.mouse.move() to get the current cursor position as a reference pointUse locator.boundingBox() and divide the returned x and width by 2Submit answersarrow-left PreviousChrome extensionsVideosNext arrow-right