跨浏览器测试：一次编写，//全运行
核心结论： 默认支持 （/Edge）、、（）三大浏览器引擎。只需在配置文件中声明 列表，或运行 npx test --= --=，即可用同一套测试脚本同时运行多浏览器测试，无需修改代码。
本文提供从安装、配置到执行、调试的完整操作路径，确保你一次性掌握跨浏览器测试全流程。
1. 环境准备：安装
使用 npm 或 yarn 安装核心包和浏览器二进制文件。
npm init @
# 或
yarn
安装过程会询问：选择 /、测试文件夹位置、是否添加 等。务必勾选所有浏览器（、、），否则后续无法跨浏览器运行。
验证安装：
npx --
# 输出示例： 1.48.0
2. 配置跨浏览器测试（核心）
通过 ..ts（或 .js）中的 字段定义要运行的浏览器。以下为标准配置：
{ , } from '@/test';
({
: './tests',
: 30000,
: 1,
use: {
: ':3000',
trace: 'on-first-retry',
},
: [
{
name: '',
use: { ...[' '] },
},
{
name: '',
use: { ...[' '] },
},
{
name: '',
use: { ...[' '] },
},
],
});
关键说明：
对象内置了各浏览器的视口、用户代理、设备像素比等预设参数。
若要测试移动端浏览器（如 、），替换为 [' 13'] 等预设。
可单独设置每个项目的 、 等。
最低配置示例（仅运行三浏览器）：
: [
{ name: '', use: { : '' } }, // 使用本地
{ name: '', use: { : '' } },
{ name: '', use: { : '' } },
]
3. 编写测试脚本（无需区分浏览器）
的 API 在所有浏览器上完全一致，因此你只需按标准方式编写测试。
示例：登录与标题验证（文件：tests/login.spec.ts）
{ test, } from '@/test';
test('跨浏览器登录测试', async ({ page }) => {
await page.goto(';);
await page.fill('#', '');
await page.fill('#', '');
await page.click('[type=""]');
await (page).(//);
await (page.('h1')).('');
});
重要原则：
避免使用 .() 等底层 API —— 测试框架会自动为每个项目创建浏览器实例。
若某个浏览器存在特定行为差异（如 对 :hover 的处理不同），可通过 ()..name 做条件分支，但推荐优先使用跨浏览器通用的定位器和断言。
4. 运行跨浏览器测试
4.1 运行所有配置的浏览器
npx test
默认会并行执行 中列出的所有浏览器。输出示例：
3 tests using 3
✓ login.spec.ts (2.1s)
✓ login.spec.ts (2.3s)
✓ login.spec.ts (2.5s)
4.2 运行指定浏览器
npx test --=
npx test --= --=
4.3 运行特定测试文件 + 特定浏览器
npx test tests/login.spec.ts --=
4.4 调试跨浏览器问题
npx test --debug
该命令会打开 ，让你逐步执行测试并查看每个浏览器的实时 DOM 快照。
5. 处理浏览器差异（常见疑难）
尽管 抹平了大部分差异，以下 3 个场景仍需注意：
| 差异类型 | 表现 | 解决方案 |
|---|---|---|
| CSS 渲染 | 不支持某些 CSS 属性（如 -- 表现不同） |
使用 () 进行视觉回归测试，针对不同浏览器生成独立快照。 |
| 键盘/鼠标事件 | 对 |
优先使用 提供的 page.click()、page..press()，避免手动构造事件。 |
| 时区/语言 | 默认时区为 UTC，可能影响日期输入 | 在配置中统一设置 use: { : '/' } 或针对项目覆盖。 |
条件分支示例（仅在必要时使用）：
test('特殊处理', async ({ page, }) => {
if ( === '') {
await page.click('#-only-');
} else {
await page.click('#-');
}
});
6. 生成测试报告与持续集成
6.1 内置报告
运行后自动生成 HTML 报告：
npx show-
6.2 配置 CI（ 示例）
创建 .//.yml：
name: Cross- Tests
on: push
jobs:
test:
runs-on: -
steps:
uses: /@v4
uses: /setup-node@v4
run: npm ci
run: npx --with-deps
run: npx test
7. 完整检查清单
[ ] 已运行 npm init @ 并安装 、、
[ ] ..ts 中 包含至少两个不同的浏览器定义
[ ] 测试脚本未使用 .() 等绕过配置的方法
[ ] 执行 npx test 后看到所有项目都运行通过
[ ] 若存在视觉差异，已添加 (page).() 并按浏览器存储基线
