Playwright+GraphQL测试因TS配置与环境变量问题失败

1. 环境变量未读取问题（<<< ENVIRONMENT: undefined >>>） #

• 确认项目根目录存在.env文件，且已配置GRAPHQL_API_URL变量，格式为GRAPHQL_API_URL=https://你的GraphQL接口地址
• 修复测试脚本的环境变量加载逻辑：
  1. 安装dotenv-cli依赖：npm install dotenv-cli --save-dev
  2. 修改package.json中的test-new脚本为："test-new": "dotenv -e .env npx playwright test"
  3. 或者在playwright.config.ts顶部手动加载环境变量：

  import dotenv from 'dotenv';
  dotenv.config();
  

• 验证：在测试代码中添加console.log('API地址:', process.env.GRAPHQL_API_URL)，执行测试确认能输出正确值

2. TypeScript导入.ts文件警告问题 #

修改tsconfig.json的compilerOptions配置：

{
  "compilerOptions": {
    "moduleResolution": "NodeNext",
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

• moduleResolution: NodeNext适配Node.js模块解析规则
• allowImportingTsExtensions: true允许导入时保留.ts扩展名
• noEmit: true因Playwright测试无需编译输出，避免冲突

3. 请求URL为空导致apiRequestContext.post参数错误 #

该问题是环境变量未读取成功的连锁反应，解决环境变量问题后即可自动修复。若仍存在异常：

• 检查测试代码中获取URL的逻辑，确保使用process.env.GRAPHQL_API_URL且未被覆盖
• 在调用post方法前添加非空校验：

  const apiUrl = process.env.GRAPHQL_API_URL;
  if (!apiUrl) {
    throw new Error('未配置GRAPHQL_API_URL环境变量');
  }
  await request.post(apiUrl, { /* 请求参数 */ });
  

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