如何拆分长Cypress测试？使用it导致页面刷新丢失表单数据

当然可以拆分，核心是解决Cypress每个it块默认重置上下文导致表单数据丢失的问题，以下是几种可行方案：

方案1：使用cy.session()持久化会话与前置状态 #

Cypress 12+ 提供的cy.session()可以保存会话状态（比如登录态），同时你可以在会话初始化时完成前序表单的填充，后续it块复用这个会话：

describe('多表单组测试', () => {
  beforeEach(() => {
    cy.session('pre-filled-forms', () => {
      // 1. 完成登录（如果需要）
      cy.login('username', 'password');
      // 2. 填充前序需要保留的表单（比如第1到第n-1个表单）
      cy.fillForm1();
      cy.fillForm2();
      // ... 直到当前it块需要的前置表单
    });
    // 每次it块开始时，跳转到表单组页面（会话会恢复之前的状态）
    cy.visit('/form-group');
  });

  it('测试表单3的提交验证', () => {
    cy.fillForm3();
    cy.submitForm3();
    cy.verifyForm3Success();
  });

  it('测试表单4的字段校验', () => {
    cy.fillForm4WithInvalidData();
    cy.verifyForm4ErrorMessages();
  });

  // 剩下的表单测试同理
});

注意：cy.session()会在会话过期或状态变化时重新执行回调，确保前序表单状态正确。

方案2：封装表单填充逻辑，在每个it块复用前置步骤 #

如果不想依赖会话功能，可以把每个表单的填充逻辑封装成自定义命令，每个it块开始时先完成所有前序表单的填充，再专注当前表单的测试：

// 在cypress/support/commands.js中定义自定义命令
Cypress.Commands.add('fillAllPreviousForms', (upToFormIndex) => {
  switch(upToFormIndex) {
    case 3:
      cy.fillForm1();
      cy.fillForm2();
      break;
    case 4:
      cy.fillForm1();
      cy.fillForm2();
      cy.fillForm3();
      break;
    // 其他情况同理
  }
});

// 测试文件
describe('多表单组测试', () => {
  beforeEach(() => {
    cy.login();
    cy.visit('/form-group');
  });

  it('测试表单1的必填字段', () => {
    cy.submitForm1WithoutRequiredFields();
    cy.verifyForm1RequiredErrors();
  });

  it('测试表单2的格式校验', () => {
    cy.fillForm1();
    cy.fillForm2WithInvalidFormat();
    cy.verifyForm2FormatErrors();
  });

  it('测试表单3的提交成功', () => {
    cy.fillAllPreviousForms(3);
    cy.fillForm3();
    cy.submitForm3();
    cy.verifyForm3Redirect();
  });
});

这种方式虽然会重复执行前序步骤，但每个it块完全独立，符合测试隔离原则，适合对测试独立性要求高的场景。

方案3：禁用Cypress的默认状态清除（不推荐） #

可以在cypress.config.js中修改配置，禁止每个it块后清除cookie、localStorage或重置页面，但这会导致测试之间产生依赖，一旦某个测试失败，后续测试可能受影响：

// cypress.config.js
module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        // 禁用页面重置（仅针对Chrome/Edge）
        if (browser.family === 'chromium') {
          launchOptions.args.push('--disable-site-isolation-trials');
        }
        return launchOptions;
      });
    },
    // 禁用自动清除cookie
    experimentalSessionAndOrigin: true,
    preserveOnce: true
  }
};

这种方式仅适合临时调试，不建议用于正式测试套件，因为破坏了测试的独立性。

方案4：单it块内拆分测试步骤（折中方案） #

如果以上方案都不适用，可以在单个it块内用自定义命令或cy.log()标记每个表单的测试步骤，既保持逻辑清晰，又避免页面重置：

it('完成所有表单组测试', () => {
  cy.log('=== 测试表单1 ===');
  cy.fillForm1();
  cy.submitForm1();
  cy.verifyForm1Success();

  cy.log('=== 测试表单2 ===');
  cy.fillForm2();
  cy.submitForm2();
  cy.verifyForm2Success();

  // 剩下的表单测试同理
});

这种方式虽然是单个it块，但通过日志和步骤拆分，依然能清晰区分每个表单的测试逻辑，适合表单之间依赖极强的场景。

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