mobile-test

name: mobile-test description: Test landing pages on mobile devices using Playwright WebKit (Safari engine). This skill should be used when testing landing pages on mobile devices, verifying Safari rendering, checking responsive layouts, or debugging iOS-specific CSS bugs. NEVER use Chrome MCP tools for mobile testing.

Mobile Device Testing

Test landing pages on real mobile device viewports using Playwright's WebKit (Safari engine) and Chromium (Android). NEVER use Chrome MCP browser tools (mcp__claude-in-chrome__*) for mobile testing — they cannot emulate mobile Safari and lack touch simulation, proper user agents, and device pixel ratios.

CRITICAL: Use Playwright, Not Chrome

All mobile testing MUST use the Playwright script or inline Playwright Node.js code. Never open Chrome for mobile tests.

Command

/mobile-test <url> [device|--all]

Quick Start — Screenshots

# Default: iPhone 15 (webkit)
npx tsx scripts/mobile-test.ts https://leadgenjay.com/consult

# Specific device
npx tsx scripts/mobile-test.ts https://leadgenjay.com/consult "iPhone 15 Pro Max"

# All 7 devices (webkit + chromium)
npx tsx scripts/mobile-test.ts https://leadgenjay.com/consult --all

# Landscape orientation
npx tsx scripts/mobile-test.ts https://leadgenjay.com/consult "iPad Pro 11" --landscape

# List available devices
npx tsx scripts/mobile-test.ts --list

Screenshots save to .playwright-cli/ and auto-open in Preview.

Interactive Testing (scroll, tap, type)

For interactive mobile tests (form filling, scrolling, tapping), write inline Playwright scripts:

// Run via: node -e "..." in Bash tool
const { webkit, devices } = require('playwright');
(async () => {
  const browser = await webkit.launch({ headless: true });
  const context = await browser.newContext({ ...devices['iPhone 15'] });
  const page = await context.newPage();

  await page.goto('https://leadgenjay.com/consult', { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);

  // Touch-scroll (mouse.wheel not supported in mobile WebKit)
  await page.evaluate((px) => window.scrollBy({ top: px, behavior: 'smooth' }), 600);
  await page.waitForTimeout(500);

  // Tap and type into form fields
  const input = page.locator('#consult-form input[placeholder="Full Name"]');
  await input.tap();
  await input.fill('Test User');

  // Screenshot at any point
  await page.screenshot({ path: '.playwright-cli/test-result.png' });

  await browser.close();
})();

Key differences from desktop Playwright:

• Use page.evaluate(() => window.scrollBy(...)) instead of mouse.wheel() (not supported in mobile WebKit)
• Use .tap() instead of .click() for touch interactions
• Scope form selectors with IDs (e.g., #consult-form input[...]) when pages have duplicate forms
• Device presets auto-set: viewport, user agent, deviceScaleFactor, isMobile, hasTouch

Device Selection

When to Use

• Pre-deploy check: Run --all before shipping landing page changes
• Safari CSS bug: Use iPhone 15 (webkit) to verify Safari-specific fixes (flex, overflow, vh)
• Responsive audit: Compare iPhone SE vs iPhone 15 Pro Max for layout range
• Cross-browser: Compare iPhone 15 (webkit) vs Pixel 7 (chromium) for engine diffs
• Form testing: Write inline Playwright script to tap fields, fill forms, verify flow

What to Check in Screenshots

1. Whitespace gaps — Extra space between sections (Safari flex/overflow bugs)
2. Overflow — Horizontal scroll or content bleeding off-screen
3. Text sizing — Text too small or truncated on smaller viewports
4. CTA visibility — Primary button visible without scrolling far
5. Image sizing — Images properly constrained, no stretching
6. Form usability — Input fields wide enough, labels readable

Common Safari CSS Bugs

Integration

• Use /mobile-test for mobile visual + interactive testing (Playwright WebKit)
• Use /test for desktop functional browser testing
• Use /preview for desktop Playwright screenshots
• Use mobile-ux-auditor skill for thumb zone / tap target analysis

Prerequisites

WebKit browser must be installed (one-time):

npx playwright install webkit