浏览器矩阵是什么
浏览器矩阵是「浏览器内核 × 版本 × 操作系统 × 设备」的兼容性测试组合清单。全覆盖不现实，通行做法是按用户流量与风险分层：主力组合跑每次提交，长尾组合放夜间或发版前。Playwright 的 WebKit 覆盖 Safari 类，Chromium 覆盖 Chrome/Edge，Firefox 走 Gecko 内核。
基本信息
| 三大内核 | Chromium（Chrome/Edge）、WebKit（Safari/iOS）、Gecko（Firefox） |
|---|---|
| 移动端 | 真机云或模拟器，覆盖触控、视口、性能差异 |
| 分层策略 | 提交门禁跑单内核，每日跑全矩阵，发版前跑验收组合 |
| 工具落点 | Playwright projects、Cypress 浏览器参数、BrowserStack 等云真机 |
| 判定口径 | 兼容性缺陷单独分类，不与功能缺陷混在同一门禁 |
| 成本 | 云真机按时长计费，矩阵越大费用与时延越高 |
Playwright 配置示意
Playwright 配置示意
// playwright.config.ts 的 projects 片段
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
{ name: 'mobile', use: { ...devices['Pixel 7'] } },
],典型使用场景
- 按流量报表定矩阵：先覆盖占绝大多数的主力和企业常驻旧版
- 分层调度：PR 跑单内核冒烟，夜间跑多内核全量
- 兼容性缺陷定位：确认是 CSS 特性还是 JS API 差异
- 移动端验证：视口、触控手势、软键盘行为与桌面不同
- 发版验收：按发布计划跑验收级组合并留报告
- 成本控制：长尾浏览器降低频率，用抽样替代全量
内核与浏览器映射
| 内核 | 覆盖浏览器 | 常见差异点 |
|---|---|---|
| Chromium | Chrome、Edge、Opera 等 | 版本节奏快，内置服务与编解码有差异 |
| WebKit | Safari、iOS 全系 | 新 API 支持滞后，滚动与媒体行为不同 |
| Gecko | Firefox | 部分 CSS 与权限行为差异 |
| 云真机 | 各品牌安卓、iPhone | 厂商定制内核与真实性能表现 |
先看流量报表再定矩阵：为占比极低的组合冻结发布节奏不值得，把资源投到主力与高价值客户在用的版本上。
模拟器不能完全替代真机：手势、性能、支付类场景要在关键机型上补真机验证。
同一内核的不同浏览器也非完全相同：Edge 与 Chrome 在服务集成上有差异，关键功能仍要单独抽查。