如何在独立TypeScript仓库中使用自定义Playwright Test Page fixture？

问题原因 #

出现“First argument must use the object destructuring pattern: _a”错误，核心是测试项目无法正确识别共享框架中自定义test对象的类型定义。当框架包未正确导出类型文件时，Playwright的类型检查器无法解析测试函数参数的解构模式要求，从而抛出错误。

解决方案 #

1. 配置共享框架的类型导出 #

在@test/framework仓库的package.json中添加类型入口，并确保编译时生成类型声明文件：

• 添加types字段指向编译后的类型文件：

  {
    "name": "@test/framework",
    "version": "1.0.0",
    "main": "dist/fixtures.js",
    "types": "dist/fixtures.d.ts",
    // 其他字段...
  }
  

• 修改仓库的tsconfig.json，开启类型声明生成：

  {
    "compilerOptions": {
      "declaration": true, // 生成.d.ts类型文件
      "outDir": "./dist", // 编译输出目录
      "target": "ES2020",
      "module": "commonjs",
      "strict": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
  }
  

2. 确保框架代码被正确编译 #

将框架的fixtures.ts移至src目录下，执行tsc编译，确保dist目录生成对应的fixtures.js和fixtures.d.ts文件。

3. 重新安装框架依赖 #

在测试仓库中：

• 删除node_modules和package-lock.json
• 重新执行npm install @test/framework

4. 验证测试代码 #

测试仓库中的google.spec.ts无需修改，重新运行npx playwright test即可正常执行。

内容的提问来源于stack exchange，提问作者Ankit Patel