Responsive Ads Testing

Test how AdSense units adapt to different container widths. Use the controls to resize the ad containers and verify that responsive ads (format="auto") adjust their dimensions accordingly.

Responsiveness Testing

• Verify ad resizes when container width changes
• Check for layout shifts (CLS) during resizing
• Ensure "auto" format ads fill the available width
• Test visibility on Mobile (350px) vs Desktop (Full)

Simulate Device Width

Auto Format Ad

Should adapt to match the container width below

In-Feed Responsive Ad

Simulating a feed of cards where the width constraint changes.

Content Card

In-Feed Ad Unit

Content Card

Example Test Code

// Playwright - Test Responsive Ad Width
// 1. Set to Mobile View
await page.click('button:has-text("Mobile")');
const mobileAd = page.locator('[data-testid="responsive-ad-container"] .adsbygoogle');
const mobileBox = await mobileAd.boundingBox();
expect(mobileBox.width).toBeLessThan(350); // Should fit in 350px container

// 2. Set to Desktop View
await page.click('button:has-text("Desktop")');
const desktopAd = page.locator('[data-testid="responsive-ad-container"] .adsbygoogle');
const desktopBox = await desktopAd.boundingBox();
expect(desktopBox.width).toBeGreaterThan(700); // Should expand