Day 17: Mobile Testing — Emulation, Viewports, and Touch Events

This is Day 17 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Playwright emulates mobile devices natively — viewport, user agent, touch events, geolocation. No Appium needed for mobile web testing.

Device Emulation

// playwright.config.ts
import { devices } from '@playwright/test';

projects: [
  { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
  { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
  { name: 'Tablet', use: { ...devices['iPad Pro 11'] } },
]

Custom Viewport

test('responsive layout at 375px', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto('/');
  await expect(page.getByRole('button', { name: 'Menu' })).toBeVisible();
  // Desktop nav should be hidden
  await expect(page.getByRole('navigation')).toBeHidden();
});

Geolocation and Permissions

test('location-based content', async ({ context, page }) => {
  await context.grantPermissions(['geolocation']);
  await context.setGeolocation({ latitude: 40.7128, longitude: -74.0060 }); // NYC
  await page.goto('/nearby');
  await expect(page.getByText('New York')).toBeVisible();
});

Color Scheme Testing

test('dark mode renders correctly', async ({ page }) => {
  await page.emulateMedia({ colorScheme: 'dark' });
  await page.goto('/');
  await expect(page).toHaveScreenshot('dark-mode.png');
});

Tomorrow (Day 18): Performance testing basics — measuring what matters.