Responsive design testing across different devices and viewports to ensure optimal user experiences.
Small screen mobile devices in portrait and landscape orientations.
Tablet devices and large mobile phones in landscape mode.
Laptop screens and small desktop monitors.
Large desktop monitors and high-resolution displays.
// playwright.config.ts
import { devices } from '@playwright/test'
export default defineConfig({
projects: [
// Desktop
{ name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'] } },
{ name: 'Desktop Safari', use: { ...devices['Desktop Safari'] } },
// Mobile
{ name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
{ name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
// Tablet
{ name: 'iPad', use: { ...devices['iPad Pro'] } },
// Custom viewport
{
name: 'Custom Mobile',
use: {
...devices['iPhone 12'],
viewport: { width: 375, height: 812 },
deviceScaleFactor: 3,
}
}
]
})test('navigation adapts to device', async ({ page }) => {
await page.goto('/')
const viewport = page.viewportSize()!
if (viewport.width < 768) {
// Mobile: hamburger menu should be visible
await expect(page.locator('[data-testid="mobile-menu"]')).toBeVisible()
await expect(page.locator('[data-testid="desktop-nav"]')).toBeHidden()
} else {
// Desktop: full navigation should be visible
await expect(page.locator('[data-testid="desktop-nav"]')).toBeVisible()
await expect(page.locator('[data-testid="mobile-menu"]')).toBeHidden()
}
})/* Mobile First Approach */
.container {
padding: 1rem; /* Mobile default */
}
@media (min-width: 768px) {
.container {
padding: 2rem; /* Tablet */
}
}
@media (min-width: 1024px) {
.container {
padding: 3rem; /* Desktop */
}
}
@media (min-width: 1440px) {
.container {
padding: 4rem; /* Large Desktop */
}
}@media (orientation: landscape) {
.mobile-nav {
flex-direction: row;
}
}
@media (orientation: portrait) {
.mobile-nav {
flex-direction: column;
}
}Minimum 44px × 44px for all interactive elements
8px minimum spacing between touch targets
Use @media (hover: hover) for hover-only interactions
Support swipe, pinch-to-zoom where appropriate