Angular项目运行Playwright测试报错：ENOENT文件或目录不存在

问题背景 #

将Angular 12应用升级到14后发现Playwright测试无法运行，新建纯净Angular 12项目测试仍出现相同错误，复现步骤如下：

• nvm install 14.15.0
• nvm use 14.15.0
• mkdir angular12 && cd angular12
• npm install @angular/cli@12
• ./node_modules/.bin/ng new playwright-test && cd playwright-test
• npm init playwright@latest（所有选项选默认）
• 执行npx playwright test或./node_modules/.bin/playwright test，触发错误：

Error: ENOENT: no such file or directory, stat '/Users/shrede01/projects/tmp/angular12/playwright-test/@playwright/test'
    at Object.statSync (fs.js:1086:3)
    at fileExists (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/util.js:319:38)
    at resolveImportSpecifierExtension (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/util.js:302:7)
    at resolveHook (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/transform/transform.js:118:68)
    at Function.resolveFilename (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/transform/transform.js:188:24)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/shrede01/projects/tmp/angular12/playwright-test/playwright.config.ts:1:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module.f._compile (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.i.<computed>.ut._extensions.<computed> (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requireOrImport (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/transform/transform.js:172:20)
    at requireOrImportDefaultObject (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/common/configLoader.js:121:53)
    at ConfigLoader.loadConfigFile (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/common/configLoader.js:94:26)
    at runTests (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/cli.js:118:55)
    at i.<anonymous> (/Users/shrede01/projects/tmp/angular12/playwright-test/node_modules/@playwright/test/lib/cli.js:40:7) {
  errno: -2,
  syscall: 'stat',
  code: 'ENOENT',
  path: '/Users/shrede01/projects/tmp/angular12/playwright-test/@playwright/test'
}

项目的package.json内容：

{
  "name": "playwright-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.18",
    "@angular/cli": "~12.2.18",
    "@angular/compiler-cli": "~12.2.0",
    "@playwright/test": "^1.37.1",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

原因分析 #

Playwright从1.30.0版本开始，要求Node.js最低版本为14.17.0，而你使用的Node.js 14.15.0低于这个要求，导致模块解析逻辑出错，触发找不到文件的ENOENT错误。

解决方案 #

方案1：升级Node.js版本（推荐）

升级到Node.js 14.17.0及以上版本（16.x/18.x LTS版本更稳定）：

1. 安装指定版本：nvm install 14.17.0
2. 切换到该版本：nvm use 14.17.0
3. 清理现有依赖：rm -rf node_modules package-lock.json
4. 重新安装依赖：npm install
5. 重新运行测试：npx playwright test

方案2：降级Playwright到兼容版本

如果无法升级Node.js，可将Playwright降级到1.29.x版本（该版本支持Node.js 12.20+）：

1. 安装指定版本：npm install @playwright/test@1.29.2 --save-dev
2. 重新运行测试：npx playwright test

内容的提问来源于stack exchange，提问作者Deewendra Shrestha