Playwright：如何将Azure DevOps库中环境变量传递至流水线？

背景 #

React/TypeScript项目，在Azure DevOps流水线运行Playwright集成测试，依赖Azure DevOps库中的环境变量。本地针对预生产环境测试正常，但流水线中测试失败，报错locator.fill: value: expected string, got undefined，原因是process.env.MyVariable未读取到值。

解决步骤 #

1. 确认Azure DevOps变量组的关联与配置 #

• 在流水线中关联目标变量组：
  • YAML流水线：在variables段添加变量组引用

    variables:
      - group: 你的变量组名称
    

  • 经典编辑器：在流水线变量设置中添加目标变量组
• 检查变量组内的MyVariable：确保值已正确填写；若为秘密变量，必须勾选「允许在脚本中访问」（秘密变量默认不会暴露给进程环境）
• 验证变量组权限：确保流水线所在项目拥有该变量组的读取权限

2. 在流水线中注入变量到Playwright测试进程 #

Azure DevOps的流水线变量不会自动映射为Node.js的process.env，需在测试执行步骤中显式传递：

方式一：直接在脚本中导出变量

• Linux/macOS代理：

  - script: |
      export MyVariable=$(MyVariable)
      npx playwright test
    displayName: '执行Playwright测试'
  

• Windows代理：

  - script: |
      set MyVariable=$(MyVariable)
      npx playwright test
    displayName: '执行Playwright测试'
  

方式二：生成.env文件供Playwright读取

Playwright默认会加载项目根目录的.env文件，可在流水线中生成该文件：

- script: |
    echo MyVariable=$(MyVariable) > .env
    npx playwright test
  displayName: '执行Playwright测试'

3. 确保Playwright正确读取环境变量 #

• 若使用自定义路径的.env文件，可在playwright.config.ts中配置加载：

  import { defineConfig } from '@playwright/test';
  import dotenv from 'dotenv';
  // 加载指定路径的.env文件
  dotenv.config({ path: './config/.env' });
  
  export default defineConfig({
    // 其他测试配置
  });
  

• 建议添加变量校验，避免类型断言的不安全写法：

  const myVariable = process.env.MyVariable;
  if (!myVariable) {
    throw new Error('环境变量MyVariable未配置');
  }
  await page.getByRole('textbox', { name: 'myVariable' }).fill(myVariable);
  

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