AI Tools for Writing Playwright Tests That Verify Responsive

Responsive design testing remains one of the most tedious aspects of web development. Manually resizing browser windows, checking each breakpoint, and verifying layout changes across devices consumes significant time. Playwright provides powerful APIs for automating these checks, and AI coding assistants can help generate these tests faster. This guide compares how different AI tools handle writing Playwright tests for responsive layout breakpoint verification.

Why Responsive Breakpoint Testing Matters

Modern web applications must function across dozens of viewport sizes. CSS media queries control layout changes, but testing these transitions manually creates coverage gaps. Automated responsive tests verify that:

Breakpoints trigger at correct pixel widths
Layout components reflow properly between sizes
Hidden elements appear or disappear as expected
Navigation adapts to touch versus mouse interaction
No horizontal scrollbar appears at any viewport width

Playwright’s resize and setViewportSize methods provide the foundation for these tests.

AI Tool Comparison for Responsive Testing

Claude (Anthropic)

Claude produces reliable Playwright tests for responsive breakpoint verification. It understands Playwright’s API well and generates tests that properly handle viewport changes and assertions.

Strengths:

Correctly implements viewport resize and verification
Generates test coverage for multiple breakpoints
Understands CSS selector strategies for responsive elements
Produces maintainable, readable test code

import { test, expect } from '@playwright/test';

test.describe('Responsive Layout Breakpoints', () => {
  const breakpoints = [
    { width: 320, height: 568, label: 'mobile-small' },
    { width: 375, height: 667, label: 'mobile' },
    { width: 768, height: 1024, label: 'tablet' },
    { width: 1024, height: 768, label: 'desktop' },
    { width: 1440, height: 900, label: 'desktop-large' },
  ];

  for (const viewport of breakpoints) {
    test(`layout adapts at ${viewport.label} (${viewport.width}x${viewport.height})`, async ({ page }) => {
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      await page.goto('/');

      // Verify navigation transforms for mobile
      const nav = page.locator('nav');
      if (viewport.width < 768) {
        await expect(nav).toHaveClass(/mobile-menu/);
        await expect(page.locator('.hamburger')).toBeVisible();
      } else {
        await expect(nav).not.toHaveClass(/mobile-menu/);
        await expect(page.locator('.hamburger')).not.toBeVisible();
      }

      // Verify content columns collapse
      const contentColumns = page.locator('.content-grid > *');
      if (viewport.width < 1024) {
        await expect(contentColumns).toHaveCount(1);
      } else {
        await expect(contentColumns).toHaveCount(3);
      }
    });
  }
});

Claude consistently generates working tests that cover the key scenarios without requiring extensive refinement.

GitHub Copilot

Copilot assists with responsive tests but requires more guidance to produce complete test coverage.

Strengths:

Quick inline suggestions for viewport-related code
Familiar with Playwright’s testing patterns
Good for single-breakpoint test generation

Weaknesses:

May generate tests for only one viewport size
Sometimes misses the loop-based approach for multiple breakpoints
Requires explicit prompting for coverage

// Copilot might generate a single-viewport test
test('navigation on mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');

  const hamburger = page.locator('.hamburger');
  await expect(hamburger).toBeVisible();
});

The generated code works but you’ll need to expand it manually for breakpoint coverage.

Cursor

Cursor combines AI assistance with IDE features, making it useful for building responsive test suites through iterative refinement.

Strengths:

Can refactor existing single-viewport tests into suites
Good multi-file context understanding
Helpful for adding responsive tests to existing test files

Weaknesses:

Quality varies based on context provided
May require multiple iterations to get complete coverage
Context window limitations with large test files

Aider

Aider works well in terminal workflows for generating responsive tests, especially when combined with existing test infrastructure.

Strengths:

Efficient for batch test generation
Terminal-friendly workflow
Good for adding responsive tests to established projects

Weaknesses:

Requires explicit specification of all breakpoints
May miss subtle Playwright-specific optimizations
Manual verification recommended

Practical Testing Patterns

Testing Breakpoint Triggers

test('CSS breakpoint classes update at correct widths', async ({ page }) => {
  await page.goto('/');

  // Start at desktop
  await page.setViewportSize({ width: 1200, height: 800 });
  await expect(page.locator('body')).toHaveClass(/viewport-desktop/);

  // Shrink to tablet
  await page.setViewportSize({ width: 768, height: 1024 });
  await expect(page.locator('body')).toHaveClass(/viewport-tablet/);

  // Shrink to mobile
  await page.setViewportSize({ width: 375, height: 667 });
  await expect(page.locator('body')).toHaveClass(/viewport-mobile/);
});

Testing Element Visibility Across Breakpoints

test('elements show/hide at correct breakpoints', async ({ page }) => {
  await page.goto('/');

  const sidebar = page.locator('.sidebar');
  const mobileMenuButton = page.locator('[data-testid="menu-toggle"]');

  // Desktop: sidebar visible, mobile menu hidden
  await page.setViewportSize({ width: 1440, height: 900 });
  await expect(sidebar).toBeVisible();
  await expect(mobileMenuButton).toBeHidden();

  // Tablet: sidebar visible, mobile menu hidden
  await page.setViewportSize({ width: 768, height: 1024 });
  await expect(sidebar).toBeVisible();
  await expect(mobileMenuButton).toBeHidden();

  // Mobile: sidebar hidden, mobile menu visible
  await page.setViewportSize({ width: 375, height: 667 });
  await expect(sidebar).toBeHidden();
  await expect(mobileMenuButton).toBeVisible();
});

Testing No Horizontal Scroll

test('no horizontal scroll at any viewport width', async ({ page }) => {
  const widths = [320, 375, 414, 768, 1024, 1280, 1440, 1920];

  for (const width of widths) {
    await page.setViewportSize({ width, height: 800 });
    await page.goto('/', { waitUntil: 'networkidle' });

    const scrollWidth = await page.evaluate(() => document.body.scrollWidth);
    const clientWidth = await page.evaluate(() => document.body.clientWidth);

    expect(scrollWidth).toBeLessThanOrEqual(clientWidth);
  }
});

Testing Responsive Images and Media

test('images load appropriate sources at each breakpoint', async ({ page }) => {
  await page.goto('/');

  const heroImage = page.locator('.hero-image');

  await page.setViewportSize({ width: 375, height: 667 });
  const mobileSrc = await heroImage.getAttribute('src');
  expect(mobileSrc).toContain('-mobile.');

  await page.setViewportSize({ width: 1440, height: 900 });
  const desktopSrc = await heroImage.getAttribute('src');
  expect(desktopSrc).toContain('-desktop.');
});

Recommendations by Use Case

For responsive test suites: Use Claude with clear instructions about all required breakpoints and the specific layout elements to verify

For quick single-breakpoint tests: GitHub Copilot works well when you need fast inline suggestions

For improving existing tests: Cursor’s agent mode can expand single-viewport tests into coverage

For CI/CD integrated test generation: Aider provides efficient terminal-based workflows

Best Practices for AI-Generated Responsive Tests

Specify all breakpoints explicitly: Tell the AI your exact breakpoint values (e.g., 320px, 768px, 1024px, 1440px)
Include element selectors: Provide CSS selectors for navigation, sidebars, grids, and other responsive components
Verify both visible and hidden states: Ensure tests check that elements appear AND disappear correctly
Add no-horizontal-scroll tests: This catches layout overflow issues that are easy to miss
Test touch versus pointer interactions: Verify hover states don’t break on touch devices

Built by theluckystrike — More at zovo.one

Why Responsive Breakpoint Testing Matters

AI Tool Comparison for Responsive Testing

Claude (Anthropic)

GitHub Copilot

Cursor

Aider

Practical Testing Patterns

Testing Breakpoint Triggers

Testing Element Visibility Across Breakpoints

Testing No Horizontal Scroll

Testing Responsive Images and Media

Recommendations by Use Case

Best Practices for AI-Generated Responsive Tests

Related Articles