如何在Cypress测试中动态覆盖baseUrl的端口（支持环境变量）

针对你遇到的不同功能对应不同端口服务、且不想写完整URL的问题，推荐直接在测试用例中动态修改Cypress的baseUrl配置，这是最简洁优雅的解决方式。

实现步骤 #

1. 保留基础配置（可选） #

你的cypress.config.ts可以保留默认baseUrl（比如设为http://localhost），也可以留空，不影响后续测试：

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost', // 仅作为基础模板，测试中会动态覆盖
  }
});

2. 在测试用例中动态设置端口 #

直接在每个it块开头用Cypress.config()修改当前测试的baseUrl，后续的cy.request、cy.visit等命令会自动使用新的baseUrl，无需手动处理尾斜杠：

it('测试功能1', () => {
  // 动态设置当前测试的baseUrl
  Cypress.config('baseUrl', 'http://localhost:3000');
  cy.request('GET', 'feature-1').as('featureOne');
  // 后续测试逻辑...
});

it('测试功能2', () => {
  Cypress.config('baseUrl', 'http://localhost:3002');
  cy.request('GET', 'feature-2').as('featureTwo');
  // 后续测试逻辑...
});

为什么之前的方案无效？ #

• 方案1（空baseUrl）：虽然可行，但需要写完整URL，不够简洁；
• 方案2（process.env.PORT）：process.env是在Cypress配置文件加载时读取的启动时配置，运行时用Cypress.env()修改无法覆盖已经初始化的baseUrl，二者不属于同一层面的配置项。

备选方案：自定义命令（按需选择） #

如果需要更灵活的端口控制，可以在cypress/support/commands.ts中自定义带端口的请求命令：

Cypress.Commands.add('requestWithPort', (port, method, path, options = {}) => {
  const baseUrl = `http://localhost:${port}`;
  // 自动处理路径开头的斜杠，避免重复拼接
  const fullPath = path.startsWith('/') ? path : `/${path}`;
  return cy.request({
    ...options,
    method,
    url: `${baseUrl}${fullPath}`
  });
});

测试中使用方式：

it('测试功能1', () => {
  cy.requestWithPort(3000, 'GET', 'feature-1').as('featureOne');
});

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