近日，不少 Angular 开发者在迁移测试工具链至 Vitest 时，遇到了一个令人困惑的错误提示：Browser "edge" is not supported by the browser provider "playwright"。这条信息出现在运行测试的命令行中，导致测试进程中断。本文将深入剖析该错误的原因、影响范围，并提供可行的解决方案。
错误现象：开发者遭遇“意外拦截”
该错误通常发生在以下场景：开发者已在 Angular 项目中集成 Vitest 作为测试运行器，并配置 Playwright 作为浏览器提供者（browser provider），意图调用 Edge 浏览器进行端到端或组件测试。然而，当执行 npx vitest 或类似命令时，Vitest 抛出上述异常，提示 Edge 不被 Playwright 支持。
实际上，Playwright 官方文档明确声明支持 Chromium、Firefox 和 WebKit 三大引擎，其中 WebKit 对应 Safari，而 Chromium 家族包括 Chrome、Edge（基于 Chromium）等。但 Playwright 的浏览器提供者接口在设计上并未直接暴露“Edge”作为独立浏览器名称，而是通过 chromium 或 edge 的二元选择——但需要正确配置。
根源剖析：配置名称与 API 不匹配
经过社区和官方文档的梳理，错误根源在于 Vitest 与 Playwright 集成时的配置参数不匹配。在 Vitest 的配置文件（vitest.config.ts）中，开发者通常这样配置浏览器：
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
browser: {
enabled: true,
provider: 'playwright',
instances: [
{ browser: 'edge' }, // 错误写法
],
},
},
});
问题出在 browser: 'edge' 这一行。Playwright 内部识别的是浏览器引擎类型，而非具体的浏览器品牌。当传入 'edge' 时，Playwright 的提供者逻辑无法将其映射到有效的引擎，从而抛出“不支持”错误。正确的写法应为 'chromium'，因为 Edge 基于 Chromium 引擎，Playwright 通过 Chromium 实例即可驱动 Edge（需在环境中指定 Edge 可执行路径）。
然而，一些开发者误以为 'edge' 是直接的浏览器名称，或者参考了旧版文档。实际上，Playwright 的 API 中 browserType 仅接受 chromium、firefox 或 webkit。若要使用 Edge，需额外配置 channel: 'msedge' 或通过环境变量指定 Edge 路径。
解决方案：三种方法让 Edge 跑起来
针对该错误，社区总结了三种主流修复方案：
-
改用 Chromium 浏览器实例（最简单）： 将配置中的
browser: 'edge'改为browser: 'chromium'。这样 Playwright 会启动 Chromium 默认引擎，如果需要 Edge 的具体特性（如特定渲染行为），则需配合launchOptions指定 Edge 可执行文件路径。 -
指定 Playwright 的 channel 参数： 如果必须使用 Edge 品牌浏览器进行测试（例如需要测试 Edge 特有的功能），可以在
instances中添加launchOptions：
ts
instances: [
{ browser: 'chromium', launchOptions: { channel: 'msedge' } },
],
这样 Playwright 会查找系统已安装的 Edge 浏览器，并使用其二进制文件启动。
- 使用
@playwright/test的浏览器枚举（更精细控制）： 对于高级用户，可以直接在配置中引用 Playwright 的BrowserType枚举，如playwright.chromium，并手动管理浏览器实例。但此方法需要更多代码，不推荐初次使用者尝试。
影响范围与行业观察
该问题主要集中在 Angular 17+ 版本中，当项目从 Karma + Jasmine 迁移到 Vitest + Playwright 时出现。由于 Angular 官方在 v15 后逐步将测试工具链转向现代方案（Vitest、Jest、Playwright），大量开发者在迁移过程中遇到此配置陷阱。此外，部分开发者习惯使用“Edge”作为浏览器名称（受 Cypress、Selenium 等工具影响），而 Playwright 的设计哲学强调引擎抽象，导致认知差异。
专家建议：遵循“引擎优先”原则
Angular 团队成员在 GitHub issue 中回应称，Playwright 的浏览器提供者设计是为了跨浏览器一致性，建议开发者优先使用 chromium，仅在需要 Edge 特定行为时通过 channel 参数切换。同时，Vitest 官方文档已更新，明确标注了浏览器名称与引擎的对应关系。
总结
Browser "edge" is not supported by the browser provider "playwright" 错误并非底层缺陷，而是配置书写习惯与 Playwright 抽象层次的不匹配。解决方案简单直接：将 browser 值改为 chromium，或通过 channel 参数指定 Edge。对于正在从传统测试框架迁移的 Angular 开发者，花几分钟调整配置即可绕过该陷阱。未来，随着 Vitest 与 Playwright 的集成文档日趋完善，此类问题有望大幅减少。