# Mobile Gesture Testing ## Touch Gestures ### Single-Finger ```javascript await page.tap('button.submit'); // Tap await page.locator('button').click({ delay: 1000 }); // Long press // Swipe simulation await page.evaluate(() => { const el = document.querySelector('.carousel'); el.dispatchEvent(new TouchEvent('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })); el.dispatchEvent(new TouchEvent('touchend', { touches: [{ clientX: 50, clientY: 100 }] })); }); ``` ### Multi-Finger (Pinch/Zoom) ```javascript await page.evaluate(() => { const el = document.querySelector('[data-zoomable]'); const touch1 = { identifier: 0, clientX: 100, clientY: 100 }; const touch2 = { identifier: 1, clientX: 120, clientY: 100 }; el.dispatchEvent(new TouchEvent('touchstart', { touches: [touch1, touch2] })); touch1.clientX = 50; touch2.clientX = 170; // Fingers apart = zoom in el.dispatchEvent(new TouchEvent('touchmove', { touches: [touch1, touch2] })); }); ``` ## Orientation Testing ```javascript const orientations = [ { width: 390, height: 844 }, // Portrait { width: 844, height: 390 }, // Landscape ]; for (const size of orientations) { await page.setViewportSize(size); await expect(page).toHaveScreenshot(`mobile-${size.width}.png`); } ``` ## Device Emulation ```typescript // playwright.config.ts import { devices } from '@playwright/test'; export default defineConfig({ projects: [ { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } }, { name: 'mobile-safari', use: { ...devices['iPhone 12'] } }, ], }); ``` ## Touch Target Checklist - [ ] Minimum 44x44px touch targets - [ ] No overlapping touch areas - [ ] Sufficient spacing between buttons - [ ] Swipe gestures have clear affordances ## Real Device Gaps Emulators miss: network throttling, touch latency, gesture recognition variations. **Minimum real device testing:** iPhone (Safari iOS), Android flagship (Chrome) ## Device Farm Services | Service | Devices | |---------|---------| | BrowserStack | 3000+ | | Sauce Labs | 2000+ | | AWS Device Farm | 200+ | ## Commands ```bash npx playwright test --project=mobile-chrome --project=mobile-safari ```