DEV Community

Styrow.dev
Styrow.dev

Posted on Originally published at styrow.dev

How do you efficiently test responsive design and device-specific behaviors using Playwright?

#testing #automation #programming #softwaredevelopment

📱 Is your web app truly responsive?
Playwright tests device-specific behaviors, ensuring perfect UX everywhere across different screen sizes.

📌 Problem Statement
Modern web apps must look flawless on any screen. Manually testing every breakpoint and device is inefficient, leading to critical UI bugs. Automate responsive tests efficiently with Playwright.

💡 Solution & Code Walkthrough
Playwright's tools simulate screen sizes and device characteristics for max test coverage.

• Global Viewports & Projects: Configure responsive testing globally in playwright.config.ts using distinct projects for different device profiles.

// playwright.config.ts - Responsive projects setup
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'desktop', use: { ...devices['Desktop Chrome'], viewport: { width: 1440, height: 900 } } },
    { name: 'tablet', use: { ...devices['iPad (gen 7)'], viewport: { width: 768, height: 1024 } } },
    { name: 'mobile', use: { ...devices['Pixel 5'], viewport: { width: 390, height: 844 } } },
  ],
});
Enter fullscreen mode Exit fullscreen mode

• Per-Test Device Emulation: For granular control, use test.use() or page methods directly for specific device emulation within your test files. This allows for detailed scenario validation.

// tests/mobile.spec.ts - Per-test iPhone 13 emulation
import { test, expect, devices } from '@playwright/test';

test.describe('Mobile UI Navigation', () => {
  test.use({ ...devices['iPhone 13'] }); // Full iPhone 13 emulation

  test('should show hamburger menu', async ({ page }) => {
    await page.goto('https://playwright.dev/docs/intro');
    await expect(page.locator('.navbar-toggler')).toBeVisible();
    await expect(page.locator('.desktop-nav-links')).not.toBeVisible();
  });
});
Enter fullscreen mode Exit fullscreen mode

🔑 Key Takeaways
• Global vs. Local: Config for broad projects. test.use() for specific emulation.
• Emulation vs. Viewport: devices presets for full traits (UA, pixel ratio). viewport sets dimensions only.
• Focus on Behaviors: Test UI changes (e.g., menu toggles), not pixel-perfect layouts.

❓ Quick Summary Q&A
Q: How to test an iPhone 13?
A: Use test.use({ ...devices['iPhone 13'] }); for full device emulation.
Q: Can I test a custom desktop resolution?
A: Yes, use viewport: { width: 1440, height: 900 } in config or page.setViewportSize().

TAGS: playwright, responsive design, testing, e2e, frontend, automation, web development

────────────────────────────────────────
Supercharge your Playwright skills!
Download our companion app for interactive guides, cheatsheets, and more advanced Playwright strategies.

────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20261004

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20261004&mt=8

────────────────────────────────────────
────────────────────────────────────────

Top comments (0)