如何使用Playwright运行Angular项目的e2e端到端测试？

无需自行开发Schematic的实现方法 #

你完全可以不用自己写Angular Schematic就能实现Playwright跑Angular e2e测试，手动配置步骤非常简单：

• 首先在Angular项目根目录执行npm init playwright@latest初始化Playwright环境，按照命令行提示选择测试文件存放目录、需要安装的浏览器内核等配置项即可。
• 修改项目根目录的package.json，新增e2e执行脚本，把Angular服务启动和Playwright测试执行绑定：
  示例脚本（兼容macOS/Linux）：

  "scripts": {
    "e2e": "ng serve & npx playwright test && pkill -f \"ng serve\""
  }
  

  如果你是Windows用户，可以借助wait-on工具做服务状态判断，避免测试启动时服务还没加载完成：
  先执行npm install wait-on --save-dev，再修改脚本：

  "scripts": {
    "e2e": "start /B ng serve && npx wait-on http://localhost:4200 && npx playwright test && taskkill /IM ng.exe /F"
  }
  

• 最后修改playwright.config.ts中的baseURL配置，设置为Angular本地服务的默认地址：

  export default defineConfig({
    use: {
      baseURL: 'http://localhost:4200',
    },
  });
  

配置完成后执行npm run e2e即可直接运行全量e2e测试，和Cypress的ng e2e使用体验一致。

Playwright官方Angular Schematic说明 #

目前Playwright已经官方提供了适配Angular的Schematic，不需要自己找第三方实现，直接在项目根目录执行ng add @playwright/test，命令会自动完成所有配置：包括生成默认测试模板、修改angular.json的e2e任务配置、安装所需依赖。配置完成后直接执行ng e2e就能触发Playwright测试，无需额外调整。

内容的提问来源于stack exchange，提问作者Christopher Peisert