← 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