← Back to library
Playwrightvisualadvancedv1.20+
Test mobile viewport with device emulation
Emulate a real device profile to verify responsive layout in a single test.
1import { test, expect, devices } from '@playwright/test';
2
3test('mobile nav is shown on iPhone 14', async ({ browser }) => {
4 // Spread the full device profile: viewport, UA, deviceScaleFactor, etc.
5 const ctx = await browser.newContext({ ...devices['iPhone 14'] });
6 const page = await ctx.newPage();
7
8 await page.goto('/');
9
10 // Hamburger visible on mobile, desktop nav hidden
11 await expect(page.getByTestId('mobile-menu-button')).toBeVisible();
12 await expect(page.getByTestId('desktop-nav')).toBeHidden();
13
14 await ctx.close();
15});#mobile#viewport#devices#responsive#emulation