如何通过YAML流水线将Azure Library变量传递给Cypress？

1. 调整Cypress环境变量读取逻辑（核心） #

Cypress不会自动用系统环境变量覆盖fixture默认值，得手动让Azure传的变量优先级更高。修改你的Cypress配置文件（cypress.config.js/cypress.config.ts）：

• 先读取系统环境变量里的WEB_APP_BASE_URL
• 要是没读到，再从environment.json fixture取默认值

示例代码：

const { defineConfig } = require('cypress');
const fs = require('fs');
const path = require('path');

// 读取fixture里的默认配置
const defaultEnv = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'cypress/fixtures/environment.json'), 'utf8'));

module.exports = defineConfig({
  env: {
    // 优先用系统环境变量，无则用fixture默认值
    WEB_APP_BASE_URL: process.env.WEB_APP_BASE_URL || defaultEnv.WEB_APP_BASE_URL
  },
  // 其他Cypress配置...
});

2. 确保Azure变量正确传递到流水线任务 #

检查Azure变量库引用 #

确认流水线已经加载了存储变量的Azure库，在YAML开头加上：

variables:
  - group: 你的Azure变量库名称 # 替换成实际库名

正确配置Npm任务的环境变量 #

有两种方式把Azure变量注入到npm任务的系统环境中：

方式一：任务内直接映射

steps:
  - task: Npm@1
    inputs:
      command: 'run'
      arguments: 'cypress:run' # 你的Cypress运行命令
    env:
      WEB_APP_BASE_URL: $(WEB_APP_BASE_URL) # 对应Azure库中的变量名

方式二：全局自动注入（适用于所有任务）

jobs:
- job: Test
  variables:
    - group: 你的Azure变量库名称
  steps:
    - task: Npm@1
      inputs:
        command: 'run'
        arguments: 'cypress:run'
      # 无需单独配置env，流水线变量会自动注入任务环境（变量名要和系统环境变量名一致）

3. 验证变量传递是否生效 #

在Cypress测试代码里加一行日志，确认实际读取到的URL：

describe('环境变量验证', () => {
  it('检查BASE_URL是否正确', () => {
    cy.log('当前WEB_APP_BASE_URL:', Cypress.env('WEB_APP_BASE_URL'));
    console.log('当前WEB_APP_BASE_URL:', Cypress.env('WEB_APP_BASE_URL'));
  });
});

运行流水线后查看任务日志，确认是否是Azure库中的值。

4. 排查常见坑 #

• 变量名大小写：Azure变量和Cypress环境变量名要完全一致（比如都用WEB_APP_BASE_URL，别混写大小写）
• fixture路径错误：确认environment.json在cypress/fixtures下，或者配置文件里路径写对
• 流水线权限：确保流水线有读取Azure变量库的权限
• 旧版Cypress兼容：如果是Cypress 10以下版本，配置文件是cypress.json，可以用占位符写法：

{
  "env": {
    "WEB_APP_BASE_URL": "${WEB_APP_BASE_URL}"
  }
}

运行时系统环境变量会自动替换这个占位符，但更推荐用新版cypress.config.js的方式。

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