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-referencebrowser-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)
When to use
How to use
The three-tier model
Cadence per tier; exact traffic thresholds are defined once in the Tier-membership heuristic section below.
| Tier | Cadence | Coverage criterion | Example |
|---|---|---|---|
| T1 - Must pass every PR | Per-PR + main | Highest-traffic, must-not-break combos | Chrome current + Chrome-1 |
| T2 - Pre-release / nightly | Nightly + pre-release | Mid-traffic OR statutory (regulated industries) | Firefox / Safari / Edge current |
| T3 - Quarterly / on-demand | Quarterly | Long-tail with customer demand | Safari iOS 16 / IE11 / niche Android |
Data sources for traffic share
| Source | Use 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.com | Same 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:
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:
Cost-tier mapping
Where to test each tier:
| Tier | Recommended infrastructure | Reason |
|---|---|---|
| T1 | Bundled engines (Playwright + Chromium / Firefox / WebKit) on CI runner | Free; fast; sufficient for engine-level coverage |
| T2 | Cloud grid (BrowserStack / Sauce / LambdaTest) | Real devices + real OS; manageable cost at nightly cadence |
| T3 | Cloud grid on-demand | Real device + low-frequency; budget-friendly |
| Internal apps | Self-hosted Selenium Grid 4 + tunnels | Data 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:
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-pattern | Why it fails | Fix |
|---|---|---|
| "Test on all browsers" without tiering | Wastes resources; nothing actually gates the release | Tier explicitly |
| Tier membership never reviewed | Drift: T3 browsers stay in T3 long after traffic dies | Quarterly review |
| Same tests across all tiers | Some tests are environment-specific; running all everywhere is wasteful | Smoke at T1 / T2 / T3; full regression at T1 only |
| Counting Chromium-engine browsers separately (Chrome, Brave, Vivaldi, Opera) | Same engine; one test covers them | Group by engine; test the dominant browser only |
| IE11 in 2026 | Trivial traffic in nearly all contexts | Audit own analytics before committing |
| Mobile and desktop in same tier | Different breakage surfaces | Treat mobile as its own dimension |
| No tier-change log | "Why is Safari 14 in T2?" - nobody remembers | Always log tier changes |
Limitations
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.