Skip to main content

Device Testing Quick Reference

🎯 Quick Commands​

Just Tell the AI:​

What You WantNatural Language Prompt
📱 iPhone"Test on iPhone 13"
📱 iPhone Landscape"Switch to iPhone 13 landscape"
📱 Android"Test on Pixel 7"
📱 Samsung"Switch to Galaxy S24"
📱 Tablet"Test on iPad Pro 11"
💻 Desktop"Show desktop view" or "Desktop Chrome"
🔄 Rotate"Rotate to landscape"
📏 Custom"Resize to 1024x768"

📱 Popular Device Presets​

iOS Devices​

iPhone SE (smallest) - 375×667
iPhone 13 (popular)  - 390×844  ⭐ Most tested
iPhone 14            - 390×844
iPhone 15            - 393×852
iPhone 15 Pro Max    - 430×932  (largest iPhone)

iPad Devices​

iPad Mini            - 768×1024
iPad Air             - 820×1180
iPad Pro 11          - 834×1194  ⭐ Popular tablet
iPad Pro 12.9        - 1024×1366 (largest iPad)

Android Phones​

Pixel 5              - 393×851
Pixel 7              - 412×915   ⭐ Stock Android
Galaxy S9+           - 360×740
Galaxy S24           - 360×780   ⭐ Latest Samsung

Desktop​

Desktop Chrome       - 1280×720  ⭐ Most common
Desktop Firefox      - 1280×720
Desktop Safari       - 1280×720

💬 Example Prompts for VS Code / Claude​

Testing a Single Device​

See More

You say:

"Navigate to my-site.com and test on iPhone 13"

AI understands:

await playwright_navigate({ url: "my-site.com" });
await playwright_resize({ device: "iPhone 13" });

Testing Multiple Devices​

You say:

"Test the homepage on iPhone 13, iPad Pro, and Desktop Chrome. 
Take screenshots of each."

AI understands:

await playwright_navigate({ url: "homepage" });

await playwright_resize({ device: "iPhone 13" });
await playwright_screenshot({ name: "mobile" });

await playwright_resize({ device: "iPad Pro 11" });
await playwright_screenshot({ name: "tablet" });

await playwright_resize({ device: "Desktop Chrome" });
await playwright_screenshot({ name: "desktop" });

Orientation Testing​

You say:

"Test the menu on iPhone 13 in both portrait and landscape"

AI understands:

await playwright_resize({ device: "iPhone 13" });
// Test portrait menu

await playwright_resize({ 
  device: "iPhone 13", 
  orientation: "landscape" 
});
// Test landscape menu

Custom Dimensions​

You say:

"Resize to 1024x768 and test the layout"

AI understands:

await playwright_resize({ width: 1024, height: 768 });

Debugging Device-Specific Issues​

You say:

"The button is broken on mobile. Test on iPhone SE (small screen), 
iPhone 13 (medium), and iPhone 15 Pro Max (large)"

AI understands:

await playwright_resize({ device: "iPhone SE" });
// Check button

await playwright_resize({ device: "iPhone 13" });
// Check button

await playwright_resize({ device: "iPhone 15 Pro Max" });
// Check button

🎨 Testing Workflows​

Responsive Design Testing​

Workflow 1: Mobile-First

"Start mobile (iPhone 13), then tablet (iPad), then desktop"

Workflow 2: Edge Cases

"Test on the smallest (iPhone SE) and largest (iPad Pro 12.9) screens"

Workflow 3: Cross-Platform

"Compare iPhone 13 vs Galaxy S24 vs Pixel 7"

Form Testing​

You say:

"Fill the signup form on iPhone 13, then switch to desktop and 
verify everything still looks good"

You say:

"Test the mobile menu hamburger on iPhone 13, then switch to 
desktop and verify it becomes a full navigation bar"

🔍 Finding Devices​

To see all devices:

node scripts/list-devices.cjs

To filter devices:

node scripts/list-devices.cjs iphone
node scripts/list-devices.cjs pixel
node scripts/list-devices.cjs ipad
node scripts/list-devices.cjs galaxy

Ask the AI:

"What iPhone models can I test?"
"Show me all Android devices"
"What are the desktop browser options?"

📊 Recommended Test Matrix​

Minimum Coverage (3 devices)​

✅ iPhone 13        (iOS mobile)
✅ iPad Pro 11      (Tablet)
✅ Desktop Chrome   (Desktop)

Good Coverage (5 devices)​

✅ iPhone 13        (iOS mobile)
✅ iPhone SE        (Small iOS)
✅ Galaxy S24       (Android mobile)
✅ iPad Pro 11      (Tablet)
✅ Desktop Chrome   (Desktop)

Excellent Coverage (8 devices)​

✅ iPhone SE        (Smallest iOS)
✅ iPhone 13        (Standard iOS)
✅ iPhone 15 Pro Max (Largest iOS)
✅ Pixel 7          (Standard Android)
✅ Galaxy S24       (Samsung flagship)
✅ iPad Air         (Standard tablet)
✅ iPad Pro 12.9    (Large tablet)
✅ Desktop Chrome   (Desktop)

🎯 Common Scenarios​

Scenario 1: "My mobile menu is broken"​

You: "Test the mobile menu on iPhone 13"

AI will:

  1. Resize to iPhone 13
  2. Test menu functionality
  3. Report issues

Scenario 2: "Layout breaks on tablets"​

You: "Test on iPad Pro 11 and iPad Mini, take screenshots"

AI will:

  1. Test on iPad Pro 11 → screenshot
  2. Test on iPad Mini → screenshot
  3. Compare layouts

Scenario 3: "Need full responsive test"​

You: "Test mobile, tablet, desktop responsiveness with screenshots"

AI will:

  1. iPhone 13 → screenshot
  2. iPad Pro 11 → screenshot
  3. Desktop Chrome → screenshot
  4. Report on layout changes

Scenario 4: "Button too small on small screens"​

You: "Test the checkout button on iPhone SE and iPhone 13"

AI will:

  1. Test on iPhone SE (smallest)
  2. Test on iPhone 13 (standard)
  3. Compare button sizes

💡 Pro Tips​

1. Always Specify Device Model​

❌ "Test on iPhone" (which one?) ✅ "Test on iPhone 13" (specific)

2. Use Real Device Names​

✅ "iPhone 13", "Galaxy S24", "Pixel 7" ❌ "Modern phone", "Latest Android"

3. Request Screenshots​

✅ "Test on iPad and take a screenshot" ✅ "Show me mobile view (screenshot)"

4. Test Orientations​

✅ "Test in both portrait and landscape" ✅ "Rotate to landscape on iPhone 13"

5. Test Edge Cases​

✅ "Test on iPhone SE (small) and iPad Pro 12.9 (large)"

🚀 Getting Started Checklist​

  • Navigate to your site
  • Test on iPhone 13 (most common mobile)
  • Test on iPad Pro 11 (common tablet)
  • Test on Desktop Chrome (desktop)
  • Request screenshots of each
  • Test landscape orientation on mobile
  • Test on smallest device (iPhone SE)
  • Test on largest tablet (iPad Pro 12.9)

📖 More Information​

  • Full Device List: Run node scripts/list-devices.cjs
  • Detailed Prompts: See Resize-Prompts-Guide.md
  • Tool Documentation: See Supported-Tools.mdx

Remember: Just use natural language! The AI will translate your intent into the correct playwright_resize commands automatically. 🎉