Cross-Browser Test Matrix: Complete Guide for Multi-Browser Testing Strategy

# CROSS-BROWSER TESTING MATRIX

## Project: E-Commerce Platform
## Test Cycle: Release 3.2.0
## Date: October 8, 2025
## Test Lead: Sarah Johnson

### Desktop Browsers

| Feature | Chrome 119 Win | Chrome 119 Mac | Safari 17 Mac | Firefox 120 Win | Edge 119 Win | Status | Issues |
|---------|---------------|----------------|---------------|-----------------|--------------|--------|--------|
| Homepage Load | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| User Login | ✓ PASS | ✓ PASS | ⚠ WARN | ✓ PASS | ✓ PASS | 80% | BUG-3421 |
| Product Search | ✓ PASS | ✓ PASS | ✓ PASS | ✗ FAIL | ✓ PASS | 80% | BUG-3422 |
| Add to Cart | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| Checkout Flow | ✓ PASS | ⚠ WARN | ✓ PASS | ✓ PASS | ✓ PASS | 80% | BUG-3423 |
| Payment Processing | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| Order Confirmation | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| User Dashboard | ✓ PASS | ✓ PASS | ⚠ WARN | ✓ PASS | ✓ PASS | 80% | BUG-3424 |
| CSS Animations | ✓ PASS | ✓ PASS | ✓ PASS | ⚠ WARN | ✓ PASS | 80% | BUG-3425 |
| Responsive Design | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |

### Mobile Browsers

| Feature | Chrome Android 13 | Safari iOS 17 | Samsung Internet | Firefox Android | Status | Issues |
|---------|-------------------|---------------|------------------|-----------------|--------|--------|
| Homepage Load | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| Touch Navigation | ✓ PASS | ⚠ WARN | ✓ PASS | ✓ PASS | 75% | BUG-3426 |
| Mobile Checkout | ✓ PASS | ✓ PASS | ✗ FAIL | ✓ PASS | 75% | BUG-3427 |
| Swipe Gestures | ✓ PASS | ✓ PASS | ✓ PASS | ⚠ WARN | 75% | BUG-3428 |
| Camera Integration | ✓ PASS | ✓ PASS | ✓ PASS | ✓ PASS | 100% | - |
| Location Services | ✓ PASS | ⚠ WARN | ✓ PASS | ✓ PASS | 75% | BUG-3429 |

### Legend
- ✓ PASS: Functionality works as expected
- ⚠ WARN: Minor issues, doesn't block usage
- ✗ FAIL: Critical failure, blocks functionality
- N/T: Not Tested
- N/A: Not Applicable

### Overall Results
- **Total Test Cases**: 16
- **Passed**: 42 (75%)
- **Warnings**: 10 (18%)
- **Failed**: 4 (7%)
- **Not Tested**: 0
- **Overall Status**: ⚠ NEEDS ATTENTION

## BUG-3422: Firefox Product Search Auto-Complete Fails

### Environment
- **Browser**: Firefox 120.0
- **OS**: Windows 11
- **Resolution**: 1920x1080
- **Zoom**: 100%

### Description
Product search autocomplete dropdown does not appear when typing in Firefox. The search still works on Enter, but the dynamic suggestions do not display.

### Expected Behavior
As user types product name, autocomplete suggestions should appear in a dropdown below the search field, showing matching products with images and prices.

### Actual Behavior
No dropdown appears. Console shows error:
```javascript
TypeError: Cannot read properties of undefined (reading 'matches')
    at autocomplete.js:45:22

// Current code (fails in Firefox)
if (CSS.supports('selector(:has(input))')) {
  // Autocomplete logic
}

// Firefox doesn't support :has() in CSS.supports check

// Updated code (cross-browser compatible)
function supportsHas() {
  try {
    document.querySelector(':has(input)');
    return true;
  } catch {
    return false;
  }
}

if (supportsHas()) {
  // Autocomplete logic
}

# docker-compose.yml for Selenium Grid
version: '3'
services:
  selenium-hub:
    image: selenium/hub:latest
    ports:
      - "4444:4444"

  chrome:
    image: selenium/node-chrome:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

  firefox:
    image: selenium/node-firefox:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

  edge:
    image: selenium/node-edge:latest
    depends_on:
      - selenium-hub
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443

// cross-browser-test.js
const { Builder, By, until } = require('selenium-webdriver');

const browsers = ['chrome', 'firefox', 'MicrosoftEdge', 'safari'];

async function runCrossBrowserTests(browserName) {
  let driver = await new Builder()
    .forBrowser(browserName)
    .usingServer('http://localhost:4444/wd/hub')
    .build();

  const results = {
    browser: browserName,
    tests: []
  };

  try {
    // Test 1: Homepage Load
    await driver.get('https://example.com');
    await driver.wait(until.titleIs('Example Store'), 5000);
    results.tests.push({ name: 'Homepage Load', status: 'PASS' });

    // Test 2: Product Search
    const searchBox = await driver.findElement(By.id('search'));
    await searchBox.sendKeys('blue shirt');
    await driver.sleep(1000);

    const suggestions = await driver.findElements(By.className('autocomplete-item'));
    if (suggestions.length > 0) {
      results.tests.push({ name: 'Autocomplete', status: 'PASS' });
    } else {
      results.tests.push({ name: 'Autocomplete', status: 'FAIL' });
    }

    // Test 3: Add to Cart
    await driver.get('https://example.com/product/123');
    const addToCartBtn = await driver.findElement(By.id('add-to-cart'));
    await addToCartBtn.click();

    await driver.wait(until.elementLocated(By.className('cart-notification')), 5000);
    results.tests.push({ name: 'Add to Cart', status: 'PASS' });

    // Test 4: Responsive Design
    await driver.manage().window().setRect({ width: 375, height: 812 });
    await driver.sleep(500);

    const mobileMenu = await driver.findElement(By.className('mobile-menu'));
    if (await mobileMenu.isDisplayed()) {
      results.tests.push({ name: 'Responsive Mobile', status: 'PASS' });
    } else {
      results.tests.push({ name: 'Responsive Mobile', status: 'FAIL' });
    }

  } catch (error) {
    results.tests.push({
      name: 'Error',
      status: 'FAIL',
      error: error.message
    });
  } finally {
    await driver.quit();
  }

  return results;
}

// Run tests across all browsers
async function runAllTests() {
  const allResults = [];

  for (const browser of browsers) {
    console.log(`Testing on ${browser}...`);
    const result = await runCrossBrowserTests(browser);
    allResults.push(result);
    console.log(`${browser}: ${result.tests.filter(t => t.status === 'PASS').length}/${result.tests.length} passed`);
  }

  // Generate report
  generateReport(allResults);
}

function generateReport(results) {
  console.log('\n=== CROSS-BROWSER TEST REPORT ===\n');

  results.forEach(browser Result => {
    console.log(`${browserResult.browser}:`);
    browser Result.tests.forEach(test => {
      console.log(`  ${test.status} - ${test.name}`);
    });
    console.log('');
  });

  const totalTests = results.reduce((sum, r) => sum + r.tests.length, 0);
  const passedTests = results.reduce(
    (sum, r) => sum + r.tests.filter(t => t.status === 'PASS').length,
    0
  );

  console.log(`Overall: ${passedTests}/${totalTests} passed (${Math.round(passedTests/totalTests*100)}%)`);
}

runAllTests();

// visual-regression-test.js
const puppeteer = require('puppeteer');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');
const fs = require('fs');

async function captureScreenshot(url, browser Name, viewport) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport(viewport);
  await page.goto(url, { waitUntil: 'networkidle2' });

  const screenshot = await page.screenshot({
    path: `screenshots/${browserName}-${viewport.width}x${viewport.height}.png`,
    fullPage: true
  });

  await browser.close();
  return screenshot;
}

function compareScreenshots(baseline Path, current Path, diff Path) {
  const baseline = PNG.sync.read(fs.readFileSync(baselinePath));
  const current = PNG.sync.read(fs.readFileSync(currentPath));
  const { width, height } = baseline;
  const diff = new PNG({ width, height });

  const numDiffPixels = pixelmatch(
    baseline.data,
    current.data,
    diff.data,
    width,
    height,
    { threshold: 0.1 }
  );

  fs.writeFileSync(diffPath, PNG.sync.write(diff));

  const diffPercentage = (numDiffPixels / (width * height)) * 100;

  return {
    diffPixels: numDiffPixels,
    diffPercentage: diffPercentage.toFixed(2),
    passed: diffPercentage < 1 // Pass if less than 1% difference
  };
}

// Run visual regression tests
async function runVisualTests() {
  const browsers = ['chrome', 'firefox', 'safari'];
  const viewports = [
    { width: 1920, height: 1080 },
    { width: 1366, height: 768 },
    { width: 375, height: 812 }
  ];

  for (const browser of browsers) {
    for (const viewport of viewports) {
      await captureScreenshot(
        'https://example.com',
        browser,
        viewport
      );

      const result = compareScreenshots(
        `baseline/${browser}-${viewport.width}x${viewport.height}.png`,
        `screenshots/${browser}-${viewport.width}x${viewport.height}.png`,
        `diff/${browser}-${viewport.width}x${viewport.height}.png`
      );

      console.log(`${browser} ${viewport.width}x${viewport.height}: ${result.passed ? 'PASS' : 'FAIL'} (${result.diffPercentage}% difference)`);
    }
  }
}

runVisualTests();

/* Modern CSS with fallbacks */

/* Grid with flexbox fallback */
.product-grid {
  display: flex; /* Fallback */
  flex-wrap: wrap;
  gap: 20px; /* Modern browsers */
}

@supports (display: grid) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
}

/* CSS Variables with fallback */
.button {
  background-color: #007bff; /* Fallback */
  background-color: var(--primary-color, #007bff);
  color: white;
}

/* WebP with JPEG fallback */
.hero-image {
  background-image: url('hero.jpg'); /* Fallback */
}

.supports-webp .hero-image {
  background-image: url('hero.webp');
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  input[type="search"] {
    -webkit-appearance: textfield;
  }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  .form-field {
    padding: 10px;
  }
}

# .github/workflows/cross-browser-tests.yml
name: Cross-Browser Tests

on:
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 0 * * *' # Daily

jobs:
  cross-browser-tests:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        browser: [chrome, firefox, edge]
        resolution: ['1920x1080', '1366x768', '375x812']

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Start Selenium Grid
        run: docker-compose up -d

      - name: Wait for Grid
        run: sleep 10

      - name: Run tests
        run: npm run test:cross-browser -- --browser=${{ matrix.browser }} --resolution=${{ matrix.resolution }}

      - name: Upload screenshots
        if: failure()
        uses: actions/upload-artifact@v2
        with:
          name: screenshots-${{ matrix.browser }}-${{ matrix.resolution }}
          path: screenshots/

      - name: Stop Selenium Grid
        if: always()
        run: docker-compose down