Stop 09 · Mobile TestingTopics · 6/8

Responsive & Cross-Device Testing

In short

Your users hold tiny phones, giant phones, tablets and foldables. A layout that looks perfect at one width can hide the Pay button at another.

Verifying a mobile app or responsive web app works correctly across different screen sizes and resolutions — a real source of layout bugs given the huge range of actual device sizes in the market.

The purple blob pours violet juice into a small glass, a tall bottle and a wide bowl.

Think of it like this

Pouring juice into different glasses

Pour the same juice into a small glass, a tall bottle and a wide bowl. It fills each shape differently, and the small glass may overflow. Responsive layouts are the juice. Every screen size is a different glass.

Watch it happen

Walking through screen widths

320

375

390

768

1024

1440

1/5These are CSS widths in pixels, from a small phone to a laptop.

The big ideas

What you need to know

Breakpoints

Layouts change at certain widths. Test just below and just above each breakpoint.

Rotation

Turn the phone sideways. Height shrinks a lot, and fixed footers can cover content.

Big text settings

Many users raise their phone's font size. Test with large text so labels don't get cut off.

DevTools device mode

Chrome's device toolbar resizes pages instantly. Good for quick checks, not a full replacement for phones.

See it in code

Walk through the code

1import { test, expect } from "@playwright/test";2 3const sizes = [4  { width: 320, height: 640 },5  { width: 390, height: 844 },6  { width: 768, height: 1024 },7  { width: 1280, height: 800 },8];9 10for (const size of sizes) {11  test("Pay button visible at " + size.width + "px", async ({ page }) => {12    await page.setViewportSize(size);13    await page.goto("https://qa.your-app.test/checkout");14    await expect(page.getByRole("button", { name: "Pay" })).toBeInViewport();15  });16}

1/3A small list of widths covering phone, tablet and laptop.

One check across four widths. Replace the URL with a page you're allowed to test.

Save yourself the pain

Common mistakes

Oops

Only checking the layout at your own laptop's width.

Do this instead

Test the smallest phone width you support, common phone widths and tablet sizes.

Oops

Trusting DevTools device mode for everything.

Do this instead

It doesn't reproduce real keyboards, notches or touch. Finish with a real phone check.

Your mission

Break a layout

~25 min

Quick check

A layout switches from two columns to one at 768px. Which widths are most worth testing?

Go deeper

1Test a responsive design across at least 3 genuinely different screen sizes.
2Learn why testing only on a couple of popular device sizes leaves significant coverage gaps.
3Practice identifying a layout issue that only appears at a specific screen size.