Browser Compatibility Testing Matrix: What to Test and Why

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    // Tier 1 — run on every PR
    {
      name: 'Chrome-Windows',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chrome', // Use system Chrome, not bundled Chromium
      },
      testMatch: ['**/*.spec.ts'],
    },
    {
      name: 'Safari-macOS',
      use: { ...devices['Desktop Safari'] },
      testMatch: ['**/*.spec.ts'],
    },
    {
      name: 'Edge-Windows',
      use: {
        ...devices['Desktop Edge'],
        channel: 'msedge',
      },
      testMatch: ['**/*.spec.ts'],
    },
    
    // Tier 2 — nightly
    {
      name: 'Firefox-Windows',
      use: { ...devices['Desktop Firefox'] },
      testMatch: ['**/*.spec.ts'],
    },
    {
      name: 'Chrome-Android',
      use: { ...devices['Pixel 7'] },
      testMatch: ['**/*.spec.ts'],
    },
    {
      name: 'Safari-iOS',
      use: { ...devices['iPhone 14'] },
      testMatch: ['**/*.spec.ts'],
    },
  ],
});

# Tier 1 (PR checks)
npx playwright <span class="hljs-built_in">test --project=Chrome-Windows --project=Safari-macOS --project=Edge-Windows

<span class="hljs-comment"># Tier 1 + 2 (nightly)
npx playwright <span class="hljs-built_in">test

// tests/compat/css-features.spec.ts
test.describe('CSS feature compatibility', () => {
  test('CSS Grid renders layout correctly', async ({ page }) => {
    await page.goto('/dashboard');
    
    const gridContainer = page.locator('[data-testid="metrics-grid"]');
    await expect(gridContainer).toBeVisible();
    
    // Verify grid layout actually applied
    const gridStyle = await gridContainer.evaluate(el => 
      window.getComputedStyle(el).display
    );
    expect(gridStyle).toBe('grid');
    
    // Check columns are rendered (4-column layout)
    const gridColumns = await gridContainer.evaluate(el =>
      window.getComputedStyle(el).gridTemplateColumns
    );
    expect(gridColumns.split(' ')).toHaveLength(4);
  });
  
  test('CSS custom properties (variables) work', async ({ page }) => {
    await page.goto('/');
    
    const primaryButton = page.locator('[data-testid="cta-button"]');
    const backgroundColor = await primaryButton.evaluate(el =>
      window.getComputedStyle(el).backgroundColor
    );
    
    // Should not be empty or inherit — variable should have resolved
    expect(backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
    expect(backgroundColor).not.toBe('');
  });
  
  test('CSS container queries work', async ({ page }) => {
    // Only run this test if your app uses container queries
    await page.goto('/');
    
    // Resize to trigger container query
    await page.setViewportSize({ width: 800, height: 600 });
    
    const card = page.locator('[data-testid="responsive-card"]');
    const layout = await card.evaluate(el => el.getAttribute('data-layout'));
    expect(layout).toBe('compact'); // Container query should set data-layout
  });
});

// tests/compat/js-features.spec.ts
test.describe('JavaScript API compatibility', () => {
  test('Intersection Observer works', async ({ page }) => {
    await page.goto('/features');
    
    // Scroll to trigger lazy loading
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(500);
    
    // Lazy-loaded images should now be visible
    const lazyImages = await page.locator('img[loading="lazy"]').all();
    for (const img of lazyImages.slice(0, 3)) {
      await expect(img).toBeVisible();
    }
  });
  
  test('Clipboard API write works (with permission)', async ({ page, context }) => {
    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
    await page.goto('/docs/api-reference');
    
    await page.click('[data-testid="copy-code-button"]');
    
    const clipboardContent = await page.evaluate(() => navigator.clipboard.readText());
    expect(clipboardContent.length).toBeGreaterThan(0);
  });
  
  test('Web Share API is handled when unavailable', async ({ page }) => {
    // WebKit on desktop doesn't support Web Share — verify graceful fallback
    await page.goto('/blog/post/1');
    
    // Share button should exist
    const shareButton = page.locator('[data-testid="share-button"]');
    await expect(shareButton).toBeVisible();
    
    // Click it — should either open Web Share or show fallback
    await shareButton.click();
    
    // Either share dialog or fallback copy-link modal should appear
    const shareDialog = page.locator('[data-testid="share-dialog"], [data-testid="copy-link-modal"]');
    await expect(shareDialog).toBeVisible();
  });
});

test('date input formats correctly', async ({ page, browserName }) => {
  await page.goto('/events/create');
  
  const dateInput = page.locator('[data-testid="event-date"]');
  await dateInput.fill('2024-12-25');
  
  const inputValue = await dateInput.inputValue();
  
  // Firefox and WebKit may format dates differently
  if (browserName === 'webkit') {
    // Safari may format as 12/25/2024 on US locale
    expect(inputValue).toMatch(/12\/25\/2024|2024-12-25/);
  } else {
    expect(inputValue).toBe('2024-12-25');
  }
});

// CI check — flag if any CSS features are used that don't support your matrix
// This can be integrated as an eslint plugin or build step:

// browserslist (.browserslistrc):
// > 1% in US
// last 2 Chrome versions
// last 2 Firefox versions  
// last 2 Safari versions
// last 2 Edge versions

// Then use postcss-preset-env or babel to auto-add prefixes/fallbacks
// based on your actual browser targets

// Parse test results to show browser-specific failures
// playwright-report/index.html groups by project (browser) automatically

// CLI command to see failures by browser
npx playwright test --reporter=list | grep FAILED

npx playwright test --reporter=json > results.json
<span class="hljs-built_in">cat results.json <span class="hljs-pipe">| jq <span class="hljs-string">'
  .suites[].suites[] | 
  select(.specs[].tests[].results[].status == "failed") <span class="hljs-pipe">|
  {browser: .title, test: .specs[].title}
'