Testland
Browse all skills & agents

browser-matrix-strategy-reference

Pure-reference for designing and reviewing a browser / OS / device test matrix from traffic data - the T1/T2/T3 tier-membership heuristics (T1 >=5% traffic, T2 1-5% or statutory, T3 <1% with customer demand), the traffic-share sources (own analytics, StatCounter, MDN browser-compat-data), a worked matrix template with tier-change log, and how to justify dropping a legacy browser (IE11, old iOS Safari). Use when designing an initial matrix, running a quarterly re-tier review, or making the case to drop a browser. This is the WHAT-to-test strategy reference - to execute the matrix use the runners browser-matrix-runner (bundled engines) or selenium-grid-4-runner (self-hosted); to cap and publish committed support tiers use compatibility-budget.

Install with skills.sh (any agent)

npx skills add testland/qa --skill browser-matrix-strategy-reference
View source

browser-matrix-strategy-reference

Overview

A real browser matrix tiers browsers by traffic share, regulatory requirement, and team budget, then runs each tier at its own cadence - not "test on everything".

This skill is a pure reference consumed by the cloud-grid skills (browserstack-automate, saucelabs-automate, lambdatest-automate)

  • the self-hosted selenium-grid-4-runner
  • existing browser-matrix-runner (bundled engines).

When to use

  • New project - defining the initial browser matrix.
  • Quarterly review - re-tier browsers as traffic shifts (e.g., IE11 traffic drops to <0.1%, demote from T2 to T3).
  • Audit / compliance - defending why specific browsers were tested (or weren't).
  • Cost optimisation - moving low-tier browsers from cloud grid (paid) to bundled engines (free).

How to use

  1. Pull browser / OS / version traffic share from your own analytics; supplement with StatCounter for geographies your own data is thin on.
  2. Apply the tier-membership heuristic (defined once below) to place each combo in T1, T2, T3, or out of scope.
  3. Group Chromium-engine browsers (Brave, Vivaldi, Opera) under the dominant browser instead of counting them as separate combos.
  4. Map each tier to infrastructure via the cost-tier mapping: bundled engines for T1, cloud grid for T2 / T3, self-hosted Selenium Grid 4 for internal apps.
  5. Record the matrix using references/matrix-template.md, giving every row an owner, a review date, and a "Why".
  6. Log every tier change in the tier-change log so audit and "why is X here?" questions have a written answer.
  7. Re-run quarterly: re-tier as traffic shifts, retire below-threshold combos, and defend legacy drops (IE11, old iOS Safari) against your own analytics.
  8. Verify before dropping a combo: assert traffic <0.1% across two independent sources (own analytics + StatCounter) AND that no statutory or SLA requirement applies; if either check fails, keep the combo in T3 and re-review next quarter.

The three-tier model

Cadence per tier; exact traffic thresholds are defined once in the Tier-membership heuristic section below.

TierCadenceCoverage criterionExample
T1 - Must pass every PRPer-PR + mainHighest-traffic, must-not-break combosChrome current + Chrome-1
T2 - Pre-release / nightlyNightly + pre-releaseMid-traffic OR statutory (regulated industries)Firefox / Safari / Edge current
T3 - Quarterly / on-demandQuarterlyLong-tail with customer demandSafari iOS 16 / IE11 / niche Android

Data sources for traffic share

SourceUse for
Your product's own analytics (GA / Plausible / etc.)Definitive ground truth for your users
StatCounter (gs.statcounter.com (opens in new window))Global / regional baseline when own data thin
MDN browser-compat-data (github.com/mdn/browser-compat-data (opens in new window))Per-feature compatibility map - which versions support a given Web API
caniuse.comSame purpose as MDN, easier UI
web-platform.org browser support (webstatus.dev (opens in new window))Web Platform features cross-browser readiness
GitHub Actions browser-default versions (github.com/actions/runner-images (opens in new window))What CI runners ship with by default

Use your own analytics for traffic-share decisions; supplement with StatCounter when slicing geographies you don't have own data for.

Worked example

A hypothetical SaaS B2B web app builds its first matrix from its own analytics:

  1. Pull traffic share. Own analytics shows Chrome 68%, Firefox 12%, Safari 8%, Edge 5%, mobile Safari 9% of mobile traffic, mobile Chrome 5% of mobile, Safari iOS 16 2% of mobile and declining.
  2. Apply the heuristic. Chrome 68% and Firefox 12% clear the T1 traffic bar, so both go to T1 (Chrome adds an N-1 row for Group-Policy lag-behind users). Safari 8%, Edge 5%, mobile Safari, and mobile Chrome fall in the T2 band or count as significant mobile platforms, so they go to T2. Safari iOS 16 at 2% and declining goes to T3.
  3. Rule browsers out. A customer survey returns 0 IE11 users with no statutory requirement, so IE11 is out of scope; Brave and Vivaldi are Chromium-based and already covered by Chrome T1.
  4. Map to infrastructure. T1 runs on bundled Playwright engines on CI (free, fast); T2 and T3 run on a cloud grid (real devices, nightly and quarterly).
  5. Log the change. Edge grew 3 -> 5% since last quarter, so it is promoted from T3 to T2 and the promotion is recorded in the tier-change log.

Result: a 3-combo T1, 5-combo T2, 4-combo T3 matrix with a documented reason per row. The filled-in artifact is references/matrix-template.md.

Tier-membership heuristic

The single authoritative traffic thresholds, referenced by the three-tier model and worked example above. A browser belongs in:

  • T1 if any of:

    • Currently ≥5% of own traffic, AND
    • "Most users" (statistically reasoned, not gut)
    • Browser the team uses internally (dogfooding)
  • T2 if any of:

    • 1-5% of own traffic
    • Required by stakeholder commitment / SLA
    • Required by regulation (e.g., accessibility on Safari iOS for AppStore review)
    • Mobile platform with significant traffic
  • T3 if any of:

    • <1% traffic but customer-requested
    • Long-tail enterprise (ESR / extended-support tracks)
    • Coverage-completeness for audit defensibility
  • Out of scope if all of:

    • <0.1% traffic
    • No customer commitment
    • No regulatory requirement
    • Already covered by an engine-compatible browser (e.g., Brave covered by Chrome)

Cost-tier mapping

Where to test each tier:

TierRecommended infrastructureReason
T1Bundled engines (Playwright + Chromium / Firefox / WebKit) on CI runnerFree; fast; sufficient for engine-level coverage
T2Cloud grid (BrowserStack / Sauce / LambdaTest)Real devices + real OS; manageable cost at nightly cadence
T3Cloud grid on-demandReal device + low-frequency; budget-friendly
Internal appsSelf-hosted Selenium Grid 4 + tunnelsData residency or cost-control

For very high-volume + cost-sensitive teams, self-hosted Selenium Grid 4 for T1 + cloud grid for T2 / T3 is the optimum mix.

Engine vs runner distinction

A T1 entry "Chrome latest" can mean:

  • Bundled Chromium engine in Playwright - fast, free, but engineered for testing (not 1:1 with stable Chrome)
  • Real Chrome stable channel via cloud grid - slower, paid, but exactly what users have

For T1 the bundled-engine path is usually sufficient; for T2 / T3, real-browser via cloud grid is the choice when the difference matters (some bugs are real-Chrome-only).

Anti-patterns

Anti-patternWhy it failsFix
"Test on all browsers" without tieringWastes resources; nothing actually gates the releaseTier explicitly
Tier membership never reviewedDrift: T3 browsers stay in T3 long after traffic diesQuarterly review
Same tests across all tiersSome tests are environment-specific; running all everywhere is wastefulSmoke at T1 / T2 / T3; full regression at T1 only
Counting Chromium-engine browsers separately (Chrome, Brave, Vivaldi, Opera)Same engine; one test covers themGroup by engine; test the dominant browser only
IE11 in 2026Trivial traffic in nearly all contextsAudit own analytics before committing
Mobile and desktop in same tierDifferent breakage surfacesTreat mobile as its own dimension
No tier-change log"Why is Safari 14 in T2?" - nobody remembersAlways log tier changes

Limitations

  • Own-analytics blindness. Bot traffic + anonymised users can skew traffic counts; sanity-check via two sources.
  • Cross-region traffic differs. Global average + your specific market may diverge; segment.
  • Bundled engines aren't real browsers. Playwright's Chromium / WebKit have engineering-for-testing edits; for some bugs only real-browser cloud grids catch.
  • Real-device matrices shift. Cloud grids retire devices / add new ones; quarterly check.

References

Worked matrix template

View source (opens in new window)

Worked matrix template

A copy-paste template for a committed browser test matrix, filled in for a hypothetical SaaS B2B web app. Replace the traffic numbers with your own analytics, keep the per-row "Why" and the tier-change log, and set real owner / review dates.

# Browser test matrix - Q2 2026

**Owner:** QA lead
**Reviewed:** YYYY-MM-DD
**Next review:** Q3 2026

## Tier 1 - must pass every PR (3 combos)

| Browser | Version | OS | Why T1 | Where tested |
|---|---|---|---|---|
| Chrome | latest stable | Linux | 68% of traffic | `playwright-testing` on CI |
| Chrome | latest-1 (N-1) | Linux | Lag-behind users (Group Policy) | `playwright-testing` on CI |
| Firefox | latest stable | Linux | 12% of traffic | `browser-matrix-runner` (bundled) |

## Tier 2 - nightly + pre-release (5 combos)

| Browser | Version | OS | Why T2 | Where tested |
|---|---|---|---|---|
| Safari | 17 | macOS Sonoma | 8% traffic; Apple-platform-only | BrowserStack Automate |
| Safari iOS | 17 | iOS 17 | Mobile Safari = 9% mobile traffic | BrowserStack Automate (real device) |
| Edge | latest | Windows 11 | 5% traffic | BrowserStack Automate |
| Chrome | latest | Android 14 | 5% mobile traffic | BrowserStack Automate (real device) |
| Firefox | ESR | Linux | Enterprise users on long-support track | `browser-matrix-runner` |

## Tier 3 - quarterly / on-demand (4 combos)

| Browser | Version | OS | Why T3 | Where tested |
|---|---|---|---|---|
| Safari iOS | 16 | iOS 16 | 2% mobile traffic; declining | BrowserStack quarterly |
| Chrome | latest | Linux ARM | <1% but B2B request | BrowserStack quarterly |
| Samsung Internet | latest | Android | <1% but high in some regions | BrowserStack quarterly |
| Opera | latest | Linux | <1%; on-demand only when customer reports | LambdaTest on-demand |

## Not in matrix (out of scope)

- IE11: customer survey 0 users; statutory not required → out of
  scope. Re-evaluate Q1 2027.
- Brave / Vivaldi: Chromium-based; covered by Chrome T1.
- Older Firefox versions (Firefox 100 and below): negligible traffic.

## Tier-change log

- 2026-Q1 → Q2: Safari iOS 15 retired (0.4% traffic, below
  threshold); Safari iOS 17 added.
- 2026-Q1 → Q2: Edge promoted to T2 (was T3) - traffic grew 3 →
  5%.

Related skills

browser-matrix-runner

Configures a CI matrix that runs the smoke / regression suite across multiple browsers per Playwright's three-engine support (Chromium, Firefox, WebKit / Safari) plus branded variants (chrome, msedge channels). Wires GitHub Actions / GitLab CI matrix syntax, captures per-browser screenshots, and aggregates per-browser pass/fail. Use when the product targets multiple browsers and the team wants automated cross-browser testing or browser-compatibility regression - e.g. a 'works in Chrome, broken in Safari' bug that needs Chrome / Firefox / Safari coverage.

compatibility-budget

Pure-reference for deciding how large a compatibility matrix a team can afford and for publishing that commitment - defines tier-1 (must work; per-PR) vs tier-2 (must work; nightly) vs tier-3 (should work; pre-release) vs unsupported, with example budgets per product type (web / desktop / mobile / library), the matrix-size cost / coverage trade-off, and 'what we support' external templates. Use when a team must cap how many browser / OS / runtime combos it commits to, or must publish a support policy. This is the BUDGET and support-statement gate - for the traffic-share analysis that picks WHICH specific browsers belong in each tier use browser-matrix-strategy-reference; to execute the resulting matrix use the runners browser-matrix-runner (bundled engines) or selenium-grid-4-runner (self-hosted).

os-matrix-runner

Configures a CI matrix that runs tests across operating systems (Linux / macOS / Windows) and runtime versions (Node 18/20/22; Python 3.10/3.11/3.12; Java 17/21; .NET 6/8). Wires GitHub Actions matrix syntax, addresses OS-specific quirks (path separators, line endings, file permissions). Use when the product ships across OS / runtime combinations and the team needs continuous cross-platform coverage.

selenium-grid-4-runner

Author and operate Selenium Grid 4 - self-hosted distributed WebDriver. Covers the six-component architecture (Router / Distributor / Session Map / Event Bus / New Session Queue / Node), standalone vs hub-and-node modes, the Docker-image stack (selenium/standalone-chrome, selenium/hub, selenium/node-chrome), node registration, session-queue tuning, and observability. Use for self-hosted cross-browser testing when data residency or cost-control require an on-prem grid. This is the self-hosted execution RUNNER - for the zero-infra alternative use browser-matrix-runner (Playwright bundled engines); for managed cloud grids use browserstack-automate, saucelabs-automate, or lambdatest-automate; to decide WHICH browsers and tiers to run use browser-matrix-strategy-reference.