🧪 Device Testing Protocol

1. The Testing Matrix

Systematic cross-device testing prevents the most embarrassing user experience failures. Psilobase's audience spans a wide range of devices — from budget Android phones to high-resolution MacBook displays — and the content (harm reduction, dosage guidance, species identification) is important enough that a broken layout could cause real-world harm by making critical information inaccessible.

2. Tools

Free and Built-In

• Chrome DevTools Device Mode: Quick responsive checks at any viewport width. Use the "Responsive" preset and drag the handle, or choose specific device presets. Also throttle CPU (6×) and network (Slow 3G) for realistic performance testing.
• Firefox Responsive Design Mode: Excellent for checking Firefox-specific rendering. Has built-in device presets and touch simulation.
• Safari Web Inspector: On macOS with an iPhone connected via USB, you can inspect Safari on iOS in real time. Essential for debugging iOS-specific layout bugs.
• Lighthouse (Chrome DevTools → Lighthouse tab): Automated audit covering Performance, Accessibility, Best Practices, SEO, and PWA. Run against both mobile and desktop presets. Aim for 90+ in all categories.
• PageSpeed Insights: Runs Lighthouse against the live URL and adds field data from the Chrome User Experience Report (CrUX). More representative of real-world performance than lab-only testing.

Commercial Tools

• BrowserStack: Cloud access to real devices and browser combinations. Invaluable for testing on devices you don't physically own. Use the "Live" product for manual testing and "Automate" for Selenium/Playwright test runs.
• Sauce Labs: Alternative to BrowserStack with strong CI/CD integration.
• LambdaTest: More affordable option with similar real-device coverage.

Accessibility-Specific

• axe DevTools (browser extension): Catches WCAG violations automatically. Run on every page before shipping changes.
• NVDA + Firefox (Windows) or VoiceOver + Safari (macOS/iOS): Manual screen reader testing. Tab through the page; every interactive element must have a clear focus state and descriptive label.
• High Contrast mode (Windows): Check that icons and borders are visible when Windows Forces High Contrast. Avoid using background images to convey meaning.

3. What to Test on Each Device

Every testing session should cover a consistent checklist to avoid regressions:

• Navigation: Can the hamburger menu open and close? Can all nav links be reached via keyboard? Does the dropdown work on touch (no hover)?
• Typography: Is body text legible without zooming? Are headings proportional? Does text reflow correctly at all widths between 320px and 1920px?
• Images: Do images load with correct aspect ratios? Is alt text present? Are images sharp on high-DPI (Retina) displays?
• Forms: Does the search bar work? Do input fields show appropriate keyboards on mobile (email, number, tel)?
• Tables: The dosage tables and species comparison charts must scroll horizontally on narrow viewports without breaking the page layout.
• Dark mode: Does the site respect prefers-color-scheme: dark on the OS level? Check contrast ratios in dark mode specifically.
• Reduced motion: Do animations and transitions respect prefers-reduced-motion: reduce? Critical for users with vestibular disorders.

4. Automating Tests

Manual testing does not scale. For a site with 1,200+ pages, automated visual regression testing catches layout breaks before they reach users.

Playwright or Cypress

Write end-to-end tests that open key pages in multiple viewport sizes and take screenshots. Compare screenshots to approved baselines. Any pixel difference triggers a review.

// Playwright — test at 3 common viewports
const viewports = [
  { width: 375, height: 812 },   // Mobile (iPhone)
  { width: 768, height: 1024 },  // Tablet (iPad)
  { width: 1440, height: 900 },  // Desktop
];

for (const viewport of viewports) {
  test(`Homepage renders at ${viewport.width}px`, async ({ page }) => {
    await page.setViewportSize(viewport);
    await page.goto('https://psilobase.com/');
    await expect(page).toHaveScreenshot(
      `home-${viewport.width}.png`,
      { fullPage: true }
    );
  });
}

CI Integration

Run these tests on every pull request using GitHub Actions. Block merges that introduce visual regressions in the navigation, layout, or key content pages.