如何在Cucumber.js中通过命令行设置浏览器与运行环境

一、环境变量传递的正确姿势 #

Windows下用set传递环境变量时，必须和npx cucumber-js放在同一行执行，否则变量不会生效：

set BROWSER=firefox && set ENV=DEV && npx cucumber-js

如果用PowerShell，语法改为：

$env:BROWSER="firefox"; $env:ENV="DEV"; npx cucumber-js

要是想写跨平台通用的命令，推荐用cross-env：

1. 安装依赖：

npm install cross-env --save-dev

2. 在package.json里加脚本：

{
  "scripts": {
    "test": "cross-env BROWSER=headlessFirefox ENV=STG npx cucumber-js"
  }
}

执行时直接跑：

npm run test

二、直接传命令行参数（类似Java的System.getProperty） #

如果不想用环境变量，直接传--参数名=值的形式更直观，两种实现方式：

方式1：解析process.argv #

写个简单的工具函数提取参数：

export function getCmdArg(key: string): string | undefined {
  const argIndex = process.argv.indexOf(`--${key}`);
  return argIndex !== -1 ? process.argv[argIndex + 1] : undefined;
}

然后在代码里替换原来的process.env：

BeforeAll(async () => {
    const browserName = getCmdArg('browser') || 'chromium';
    switch (browserName) {
        case 'firefox':
            browser = await firefox.launch(config.browserOptions);
            break;
        case 'headlessFirefox':
            browser = await firefox.launch({ headless: true });
            break;
        case 'webkit':
            browser = await webkit.launch(config.browserOptions);
            break;
        case 'headlessWebkit':
            browser = await webkit.launch({ headless: true });
            break;
        case 'headlessChromium':
            browser = await chromium.launch({ headless: true });
            break;
        default:
            browser = await chromium.launch(config.browserOptions);
    }
    context = await browser.newContext();
    page = await context.newPage();
    return page;
});

export function getBaseUrl() {
    const environment = getCmdArg('env') || config.BASE_URL;
    switch (environment) {
        case 'DEV':
            return "devEnvPlaceholder";
        case 'STG':
            return "stagingEnvPlaceholder";
        default:
            return config.BASE_URL;
    }
}

执行命令：

npx cucumber-js --browser=webkit --env=DEV

方式2：用Cucumber配置传递参数 #

在cucumber.js配置文件里添加参数解析逻辑：

module.exports = {
  default: {
    parameters: {
      browser: process.argv.includes('--browser') ? process.argv[process.argv.indexOf('--browser') + 1] : 'chromium',
      env: process.argv.includes('--env') ? process.argv[process.argv.indexOf('--env') + 1] : 'default'
    }
  }
}

然后在BeforeAll里通过this.parameters获取：

BeforeAll(async function () {
  const browserName = this.parameters.browser || 'chromium';
  // 后续switch逻辑同上
});

三、必须修复的代码bug #

你当前的switch语句里多个case没有加break，会导致执行完当前case后继续跑后面的逻辑（比如headlessFirefox会触发webkit.launch），已经在上面的代码里补上了break，记得要加上。

内容的提问来源于stack exchange，提问作者Cosmin Cîrstea