如何在Cypress E2E沙箱环境中测试SDK示例应用服务器启动？

明确说明：Cypress本身不提供直接运行Node.js应用的沙箱环境，但可以通过以下几种方式绕开端口冲突问题，同时完成测试需求：

1. 动态分配端口 #

修改示例应用的启动配置，让它自动选择可用端口而非固定3000：

• 在示例应用的启动脚本（如server.js或配置文件）中，将端口设置为process.env.PORT || 3000
• 运行npm start时通过环境变量指定随机端口：PORT=$(npx get-port) npm start
• 在Cypress测试中先获取该动态端口，再访问对应地址

2. 用Cypress插件/自定义任务管理应用进程 #

通过自定义任务实现示例应用的启动、清理，确保测试前后进程被正确管控：

• 在cypress.config.js中添加任务逻辑：

const { execSync } = require('child_process');
const fs = require('fs');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        startSampleApp: () => {
          // 解压示例包
          execSync('unzip ./sample-app.zip -d ./temp-sample');
          // 获取随机端口
          const port = execSync('npx get-port').toString().trim();
          // 后台启动应用
          execSync(`cd ./temp-sample && PORT=${port} npm start &`);
          // 等待服务器就绪
          execSync(`npx wait-on http://localhost:${port}`);
          return port;
        },
        cleanupSampleApp: () => {
          // 终止应用进程
          execSync('pkill -f "npm start"');
          // 删除临时目录
          fs.rmSync('./temp-sample', { recursive: true, force: true });
          return null;
        }
      });
    },
  },
});

• 在测试用例中调用任务：

describe('SDK示例应用测试', () => {
  let appPort;

  before(() => {
    cy.task('startSampleApp').then(port => {
      appPort = port;
    });
  });

  after(() => {
    cy.task('cleanupSampleApp');
  });

  it('验证应用正常启动', () => {
    cy.visit(`http://localhost:${appPort}`);
    // 可添加更多验证逻辑，如检查页面核心元素
  });
});

3. 用cy.exec()直接控制进程 #

在测试钩子中通过cy.exec()执行命令，完成应用的启停与端口动态分配：

describe('SDK示例应用测试', () => {
  let appPort;

  before(() => {
    // 解压示例包
    cy.exec('unzip ./sample-app.zip -d ./temp-sample');
    // 获取随机端口并启动应用
    cy.exec('npx get-port').then(result => {
      appPort = result.stdout.trim();
      cy.exec(`cd ./temp-sample && PORT=${appPort} npm start &`);
      cy.exec(`npx wait-on http://localhost:${appPort}`);
    });
  });

  after(() => {
    // 清理进程与临时文件
    cy.exec('pkill -f "npm start"');
    cy.exec('rm -rf ./temp-sample');
  });

  it('应用可正常访问', () => {
    cy.visit(`http://localhost:${appPort}`);
    cy.contains('SDK示例应用'); // 替换为页面实际标识文本
  });
});

注意事项 #

• 需提前安装依赖：npm install get-port wait-on --save-dev
• 进程清理逻辑要可靠，避免测试失败后残留进程占用端口
• Windows环境需替换pkill等命令为对应Windows指令（如taskkill）

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