Responsive and Device Emulation Strategies

Users visit your site from many devices and screen sizes, so responsive behaviour is a core quality concern. Playwright can emulate different viewports and devices, helping you catch layout issues before they reach production.

Testing Responsive Layouts with Viewports and Devices #

You can configure different projects for desktop and mobile profiles or set viewports directly in tests. This makes it easy to run the same scenarios across multiple layouts.

// playwright.config.ts (responsive projects)
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'Desktop Chrome',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
});

// responsive-layout.spec.ts
import { test, expect } from '@playwright/test';

test('navigation collapses into mobile menu', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto('https://demo.myshop.com');

  await expect(page.getByRole('button', { name: 'Open menu' })).toBeVisible();
});

Combining responsive checks with visual snapshots helps you detect layout regressions quickly when CSS changes.

Common Mistakes #

Mistake 1 — Only testing at one viewport size #

This ignores many devices.

❌ Wrong: Assuming that if it works at 1280px wide, it works everywhere.

✅ Correct: Define a small set of representative viewports (mobile, tablet, desktop).

Mistake 2 — Mixing device concerns with unrelated test logic #

This complicates tests.

❌ Wrong: Embedding lots of viewport changes inside unrelated scenarios.

✅ Correct: Keep device-specific checks in clearly named tests or projects.