3.5Common Responsive Bugs to Test For

Horizontal Overflow

The most common responsive bug: content wider than the viewport causes a horizontal scrollbar.

test('no horizontal overflow on any page', async ({ page }) => {
    const pages = ['/', '/products', '/cart', '/checkout', '/account'];
    const widths = [320, 375, 768, 1024, 1440];

    for (const pagePath of pages) {
        for (const width of widths) {
            await page.setViewportSize({ width, height: 800 });
            await page.goto(pagePath);

            const hasOverflow = await page.evaluate(() => {
                return document.body.scrollWidth > window.innerWidth;
            });

            expect(hasOverflow).toBe(false);
        }
    }
});

Touch Target Overlap

On mobile, elements that are spaced fine on desktop may overlap or be too close together:

test('interactive elements have adequate spacing on mobile', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 812 });
    await page.goto('/');

    const buttons = await page.locator('button, a, [role="button"]').all();
    const rects = await Promise.all(buttons.map(b => b.boundingBox()));

    for (let i = 0; i < rects.length; i++) {
        for (let j = i + 1; j < rects.length; j++) {
            const a = rects[i];
            const b = rects[j];
            if (!a || !b) continue;

            // Check if elements overlap
            const overlapsX = a.x < b.x + b.width && a.x + a.width > b.x;
            const overlapsY = a.y < b.y + b.height && a.y + a.height > b.y;

            if (overlapsX && overlapsY) {
                // Calculate overlap area
                const overlapWidth = Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x);
                const overlapHeight = Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y);
                const overlapArea = overlapWidth * overlapHeight;

                expect(overlapArea).toBeLessThan(50);
            }
        }
    }
});

Image Scaling

test('images do not overflow their containers', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 812 });
    await page.goto('/products');

    const images = await page.locator('img').all();
    for (const img of images) {
        const box = await img.boundingBox();
        if (box) {
            expect(box.width).toBeLessThanOrEqual(375);
        }
    }
});