跨浏览器测试是指检查网站在访客所用的浏览器和设备上能否正确显示和运行。实际上就是在桌面端和移动端覆盖三个渲染引擎：Chromium 的 Blink、Safari 的 WebKit 和 Firefox 的 Gecko。大部分工作可以免费完成：用本机安装的浏览器、Playwright 和手机视图工具即可。只有在需要自己没有的真机时，才值得为云端设备付费。
应该测试哪些浏览器
从你自己网站的统计数据出发，而不是看全球排行。B2B 后台可能主要在桌面版 Chrome 和 Edge 上使用，而面向消费者的商城可能主要来自 iPhone 上的 Safari。查看最近三个月的浏览器和设备报告，覆盖所有占比超过几个百分点的组合。
如果还没有数据，下面这组浏览器可以覆盖所有引擎和大部分真实流量：
| 浏览器 | 引擎 | 为什么重要 |
|---|---|---|
| Chrome（桌面和 Android） | Blink | 在桌面和 Android 上份额最大 |
| Safari（iPhone、iPad、Mac） | WebKit | 覆盖所有 iPhone 用户，“只在手机上出现”的问题大多出在这里 |
| Edge | Blink | Windows 默认浏览器，表现通常与 Chrome 一致 |
| Firefox | Gecko | 独立引擎，能暴露那些其实只是 Chromium 特性的假设 |
| Samsung Internet | Blink | 预装在三星手机上，有自己的更新节奏和深色模式 |
最需要关注的是两个引擎：WebKit，因为 iPhone；Gecko，因为它是唯一一个既不属于 Apple 也不属于 Google 的主流引擎。
在每个浏览器中检查什么
跨浏览器问题往往集中在可预见的地方。在每个关键页面上过一遍这份清单：
- 布局。 flexbox 和 grid 的
gap、position: sticky、aspect-ratio，以及旧版浏览器中的容器查询。 - 字体。 Web 字体能否加载，备用字体的字形尺寸是否接近，加载时是否出现文字不可见。
- 表单。 日期和时间选择器、
select样式、自动填充颜色、校验提示，以及每个输入框对应的手机键盘类型。 - 媒体。 视频自动播放规则（大多数移动浏览器只允许静音自动播放）、AVIF 等图片格式、
srcset选择的图片。 - 滚动和视口单位。 移动端
100vh与动态100dvh的区别、滚动吸附、平滑滚动、过度滚动。 - JavaScript API。 凡是近两年才出现的功能，使用前都要先确认支持情况。
- 交互。 触屏设备上只靠悬停展开的菜单、键盘用户的焦点轮廓、点击区域大小。
- 深色模式和缩放。 页面在 200% 缩放和系统深色模式下的表现。
能完成大部分工作的免费工具
安装浏览器。 Chrome、Edge 和 Firefox 可以在所有桌面系统上运行。Safari 只能在 macOS 上运行，这也是没有 Mac 的测试人员需要额外工具的主要原因。
写代码之前先查兼容性。 Baseline 会把 Web 功能标注为在主流浏览器中“newly available”或“widely available”，Can I use 则提供按版本列出的支持表。提前查一下，就能避免大部分兼容性问题。
用 Playwright 自动化。 Playwright 可以在 Windows、macOS 和 Linux 上用同一个测试脚本运行 Chromium、Firefox 和 WebKit，还能模拟移动设备。写一个简短脚本，在三个引擎中打开最重要的十个页面并保存截图，就能在每次 pull request 时发现大部分回归问题。
用手机视图检查响应式。 移动端布局问题常常被误认为是浏览器问题。先用 DevTools 设备模式或 Mobile View Extension 这样的插件快速排除布局问题，再去找引擎相关的原因。两种工具的区别见手机模拟插件与 DevTools 对比。
用模拟器测试移动端引擎。 Xcode Simulator 可以在 Mac 上运行真正的 iOS Safari（教程）；Android Studio 模拟器可以运行真正的 Android 版 Chrome（教程）。
什么时候值得用付费的跨浏览器测试工具
云测试服务提供真机和大量浏览器版本的租用。以下情况值得付费：
- 你没有 Mac，但需要经常测试 iPhone 上的 Safari；
- 客户使用的旧版浏览器无法在同一台电脑上并存安装；
- 客户合同要求在特定手机型号上测试；
- 自动化测试需要在真实的移动硬件上运行。
对于小型网站，通常只需在发版那一周开一个月度套餐；偶尔检查的话，免费试用就已经很够用了。
轻量级的跨浏览器测试流程
- 开发过程中： 使用新功能前先查 Baseline，写代码时随时在手机视图中预览。
- 每次 pull request： 用 Playwright 在 Chromium、Firefox 和 WebKit 中截图。
- 发布前： 在 Safari（Mac 或模拟器）、Firefox 和 Android 版 Chrome 中走一遍关键流程。
- 发布后： 关注错误监控和统计数据，按浏览器分组查看错误。
发布前移动端检查的详细内容见移动端网页测试清单。
常见问题
如何免费在不同浏览器中测试网站？
安装 Chrome、Edge 和 Firefox，用 Playwright 在任意系统上运行 WebKit，再用 DevTools 或手机视图插件检查手机尺寸。如果有 Mac，Xcode Simulator 还能提供真正的 iOS Safari。
已经在 Chrome 中测过，还需要测 Edge 吗？
Edge 和 Chrome 使用同一个引擎，所以很少出现差异。快速过一遍就够了，除非你的用户使用 Edge 特有的功能或企业策略。
目前跨浏览器问题最常见的原因是什么？
在 CSS 或 JavaScript 功能还没有被用户所用的全部浏览器支持之前就使用了它。采用新功能前先查看它的 Baseline 状态，就能避免大部分此类问题。