Test QA Shop on a mobile viewport with Playwright device emulation

This recipe shows the smallest useful mobile-viewport Playwright test against QA Shop.

It applies the iPhone-15 device descriptor at the file level, lands on the home page, and asserts the mobile drawer hamburger replaces the desktop navigation. The descriptor handles the viewport, user agent, device scale factor, and touch capability together — the five axes that together convince an app it is running on a real phone.

Mobile emulation with devices[…] is the right tool when you want to verify responsive behavior, touch-only UI, or layout breakpoints without provisioning a real iOS or Android device.

Save this file as tests/recipes/playwright/mobile-viewport-responsive.spec.ts and run it with npx playwright test --grep mobile-viewport-responsive.

// tests/recipes/playwright/mobile-viewport-responsive.spec.ts
import { test, expect, devices } from "@playwright/test";
 
test.use({ ...devices["iPhone 15"] });
 
test("mobile drawer replaces the desktop nav on an iPhone viewport", async ({ page }) => {
  // 1. Land on the home page in mobile emulation mode.
  await page.goto("/");
 
  // 2. The hamburger trigger is mobile-only (CSS class `show-mobile`); on
  //    the iPhone 15 viewport (390 x 844) it must be visible.
  const trigger = page.getByTestId("mobile-menu-trigger");
  await expect(trigger).toBeVisible();
 
  // 3. Tap to open the drawer; the SheetContent slides in from the left.
  await trigger.click();
  await expect(page.getByTestId("mobile-menu-sheet")).toBeVisible();
});

Three details deserve a callout.

test.use({ ...devices["iPhone 15"] }) lives at the top of the file, not inside the test body. Playwright reads test.use during fixture resolution — calling it inside a test throws at runtime. The spread is required because the descriptor is a plain object, and test.use accepts a partial test options object.

The visibility assertion runs before the click. Playwright's auto-wait will retry the click on an invisible element until the action timeout, then fail with a generic "element is not visible" error 30 seconds later. The explicit toBeVisible() short-circuits the wait and fails immediately if the responsive CSS class show-mobile ever regresses¹.

The drawer assertion uses the testid on SheetContent itself, not a child element. Shadcn's Sheet portals SheetContent outside the trigger's DOM tree, so a relative selector from the trigger would not find it. The testid mobile-menu-sheet is set on the portal root and is the canonical handle for this drawer.

A common shortcut is test.use({ viewport: { width: 390, height: 844 } }). It looks equivalent — the iPhone 15 has a 390 x 844 viewport. It is not.

Common questions when extending this pattern to other devices and breakpoints.

Related

For the cart-and-checkout starter test that exercises real network traffic end-to-end, see the add-to-cart Playwright recipe. For the broader Playwright vs Selenium vs Cypress picture, see the QA Shop testing guide.

The Selenium, Cypress, and WebdriverIO mobile-viewport counterparts are coming soon — placeholder slugs are /recipes/selenium/mobile-viewport-responsive, /recipes/cypress/mobile-viewport-responsive, and /recipes/webdriverio/mobile-viewport-responsive.

Last verified: May 3, 2026