Monitoring Mobile and Responsive Experiences

More than 50% of web traffic now comes from mobile devices. If your synthetic monitors only test on desktop, you are missing half of your user experience. supaguard leverages Playwright's native Device Emulation to monitor mobile-specific flows.

Why Monitor Mobile?

• Responsive Breakpoints: A button that works on desktop might be obscured by a navigation drawer on mobile.
• Touch Targets: Elements must be large enough and spaced correctly for touch interactions.
• Performance: Mobile devices often have higher latency and slower rendering times.

How to Emulate a Mobile Device

In your supaguard check script, you can specify a device profile from Playwright's built-in list.

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

// Use the iPhone 14 profile
test.use({ ...devices['iPhone 14'] });

test('mobile navigation works', async ({ page }) => {
  await page.goto('/');

  // 1. Mobile menu is usually hidden behind a 'Hamburger' icon
  const menuButton = page.getByRole('button', { name: 'Open menu' });
  await menuButton.click();

  // 2. Verify links are visible in the drawer
  await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
});

Monitoring Tablet and Custom Viewports

If you need to test a specific breakpoint (e.g., an iPad in landscape mode):

test.use({ 
  viewport: { width: 1024, height: 768 },
  userAgent: 'supaguard-Tablet-Agent'
});

Best Practices

1. Separate Mobile Checks: Create dedicated "Mobile Check" instances for your critical paths (Login, Checkout) to track mobile-specific uptime.
2. Test Touch Events: Use page.tap() instead of page.click() to simulate real mobile interactions.
3. Check for Overlays: Interstitial ads or cookie banners often behave differently on mobile viewports.

Master the Experience

• Resilient Locators
• Global Performance Benchmarking
• Intelligent Failure Classification