如何在运行Cypress测试前启动webpack-dev-server？

• cypress: 10.7
• webpack: 5.74.0
• webpack-dev-server: ^4.10.1

CypressError: cy.visit() failed trying to load:
http://localhost:3000/

出现该报错实属正常。
但是，如何在运行Cypress测试前启动webpack-dev-server呢？

解决方法 #

方法1：用npm脚本并行启动 #

借助npm-run-all实现跨平台的命令并行与串行控制：

1. 安装依赖

npm install npm-run-all --save-dev

2. 修改package.json的scripts字段：

"scripts": {
  "dev": "webpack serve --mode development",
  "cypress:open": "cypress open",
  "test:e2e": "npm-run-all -p dev -r cypress:open"
}

• -p：并行执行dev命令启动服务
• -r：等待服务启动完成后，再启动Cypress

方法2：使用start-server-and-test工具 #

这个工具会自动检测服务是否就绪，比单纯并行更可靠：

1. 安装依赖

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

2. 修改package.json的scripts字段：

"scripts": {
  "dev": "webpack serve --mode development --port 3000",
  "cypress:run": "cypress run",
  "cypress:open": "cypress open",
  "test:e2e:run": "start-server-and-test dev http://localhost:3000 cypress:run",
  "test:e2e:open": "start-server-and-test dev http://localhost:3000 cypress:open"
}

运行npm run test:e2e:open，工具会先启动webpack-dev-server，等3000端口服务就绪后自动打开Cypress。

方法3：在Cypress配置中自定义启动逻辑 #

直接在Cypress配置文件里通过Node.js代码控制服务启停：

const { defineConfig } = require('cypress');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.js'); // 引入你的webpack配置文件

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      let server;
      
      // 测试前启动服务
      on('before:run', async () => {
        const compiler = webpack(webpackConfig);
        server = new WebpackDevServer({ port: 3000 }, compiler);
        await server.start();
      });

      // 测试结束后停止服务
      on('after:run', async () => {
        await server.stop();
      });

      return config;
    },
  },
});

这种方式不需要额外依赖，但需要自己维护服务的启动和停止逻辑，适合有自定义需求的场景。

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