如何依次运行vue-cli-service serve与Cucumber测试？

方案一：排查并修正start-server-and-test配置 #

你尝试的start-server-and-test是最便捷的跨平台方案，大概率是配置细节没到位，按以下步骤调整：

1. 确保依赖已安装：

npm install --save-dev start-server-and-test

2. 修改package.json脚本：

"scripts": {
  "serve": "vue-cli-service serve",
  "test:playwright": "cucumber-js --require ./cucumber.js --require ./step-definitions/**/*.js",
  "test:e2e": "start-server-and-test serve http://localhost:8080 test:playwright"
}

3. 关键细节检查：
   • 确认Vue服务端口是否为8080，如果项目配置了其他端口（比如3000），同步修改URL。
   • 若服务启动后返回重定向（状态码302）而非200，可指定允许的状态码：

   "test:e2e": "start-server-and-test serve http://localhost:8080 200,302 test:playwright"
   

   • 服务启动慢的话，延长超时时间（默认10秒）：

   "test:e2e": "start-server-and-test serve http://localhost:8080 -t 30000 test:playwright"
   

方案二：在Cucumber BeforeAll钩子中轮询等待服务 #

如果start-server-and-test仍不生效，用Cucumber全局钩子手动等待服务就绪：

1. 编写服务检查工具函数（新建wait-for-server.js）：

const http = require('http');

function waitForServer(host = 'localhost', port = 8080, timeout = 30000) {
  const startTime = Date.now();
  return new Promise((resolve, reject) => {
    const checkServer = () => {
      if (Date.now() - startTime > timeout) {
        return reject(new Error(`服务未在${timeout}ms内启动`));
      }
      const req = http.get(`http://${host}:${port}`, (res) => {
        if ([200, 302].includes(res.statusCode)) {
          resolve();
        } else {
          setTimeout(checkServer, 1000);
        }
        res.resume();
      });
      req.on('error', () => setTimeout(checkServer, 1000));
    };
    checkServer();
  });
}

module.exports = waitForServer;

2. 创建Cucumber钩子文件（新建hooks.js）：

const { BeforeAll } = require('@cucumber/cucumber');
const waitForServer = require('./wait-for-server');

BeforeAll(async () => {
  // 等待Vue服务就绪
  await waitForServer('localhost', 8080);
  // 可在此初始化Playwright实例（按需）
  // const playwright = require('playwright');
  // global.browser = await playwright.chromium.launch();
});

3. 修改package.json脚本，后台启动服务后执行测试：

"scripts": {
  "serve": "vue-cli-service serve",
  "test:playwright": "cucumber-js --require ./cucumber.js --require ./hooks.js --require ./step-definitions/**/*.js",
  // Linux/macOS 用&后台启动
  "test:e2e": "vue-cli-service serve & npm run test:playwright",
  // Windows 用start /B后台启动
  // "test:e2e": "start /B vue-cli-service serve && npm run test:playwright"
}

4. 跨平台兼容：安装npm-run-all后替换后台命令：

"test:e2e": "npm-run-all -p serve -r test:playwright"

方案三：Vue服务就绪后触发测试（进阶） #

若需更精准的触发逻辑，可修改Vue CLI配置，在服务完全启动后自动调用测试命令，但该方式需调整项目启动流程，仅推荐用于CI等特定场景，前两种方案已能覆盖大部分开发需求。

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