Cypress跨迭代块及多Spec文件状态传递问题求助

一、单个spec文件内跨it块共享状态 #

Cypress的it块默认是隔离执行的，但可以通过before/beforeEach钩子复用前置操作，同时把需要共享的状态存到变量或Cypress环境变量中，避免重复访问页面。

示例代码：

describe('员工管理功能', () => {
  let newEmployee;

  // 所有it块执行前完成员工创建，保存状态
  before(() => {
    cy.visit('/employees');
    // 执行创建员工流程
    cy.get('[data-test="add-employee-btn"]').click();
    cy.get('[data-test="name-input"]').type('张三');
    cy.get('[data-test="save-btn"]').click();
    // 从成功提示中提取员工名称并保存
    cy.get('[data-test="success-alert"]').invoke('text').then(text => {
      newEmployee = { name: text.match(/创建成功：(.*)/)[1] };
    });
  });

  it('验证新员工显示在列表中', () => {
    // 无需重新访问，直接复用before钩子的页面上下文
    cy.get('[data-test="employee-list"]').should('contain', newEmployee.name);
  });

  it('搜索刚创建的员工', () => {
    cy.get('[data-test="search-input"]').type(newEmployee.name);
    cy.get('[data-test="employee-list"]').should('have.length', 1);
  });
});

二、多spec文件间共享状态 #

跨文件传递状态可以通过文件读写持久化数据，比如用cy.writeFile把状态写入JSON文件，再在其他spec中用cy.readFile或cy.fixture读取。

1. 创建员工的spec文件：

// create-employee.spec.js
describe('创建员工', () => {
  it('成功创建新员工并保存状态', () => {
    cy.visit('/employees');
    cy.get('[data-test="add-employee-btn"]').click();
    cy.get('[data-test="name-input"]').type('李四');
    cy.get('[data-test="save-btn"]').click();
    cy.get('[data-test="success-alert"]').invoke('text').then(text => {
      const employeeName = text.match(/创建成功：(.*)/)[1];
      // 把员工信息写入fixtures目录下的JSON文件
      cy.writeFile('cypress/fixtures/new-employee.json', { name: employeeName });
    });
  });
});

2. 搜索员工的spec文件：

// search-employee.spec.js
describe('搜索员工', () => {
  let newEmployee;

  before(() => {
    // 读取之前保存的员工信息
    cy.fixture('new-employee.json').then(data => {
      newEmployee = data;
      cy.visit('/employees');
    });
  });

  it('搜索刚创建的员工', () => {
    cy.get('[data-test="search-input"]').type(newEmployee.name);
    cy.get('[data-test="employee-list"]').should('contain', newEmployee.name);
  });
});

注意：需确保创建员工的spec先执行，可在cypress.config.js中配置spec执行顺序，或用测试套件插件管理依赖。

三、用cy.session()复用页面会话（Cypress 12+） #

如果需要跨it块或跨spec文件复用浏览器会话（比如保持登录状态、页面上下文），可以用cy.session()，它会保存cookie、localStorage等状态，避免重复加载页面。

示例代码：

describe('员工管理', () => {
  // 初始化并保存会话
  cy.session('employee-session', () => {
    cy.visit('/employees');
    // 若需登录，可在此添加登录操作
  });

  it('创建员工', () => {
    cy.get('[data-test="add-employee-btn"]').click();
    // ...创建员工流程
  });

  it('搜索员工', () => {
    // 无需重新访问页面，会话会恢复之前的状态
    cy.get('[data-test="search-input"]').type('张三');
    // ...验证搜索结果
  });
});

内容的提问来源于stack exchange，提问作者Muhammad Ali Farooqui