关于Cypress会话清除及testIsolation:false用法的技术咨询

1. 页面被导航至about:blank的原因 #

Cypress默认开启测试隔离（testIsolation: true），每个it块执行前后会重置浏览器状态：

• 执行前：导航至about:blank，清除之前的页面状态
• 执行后：再次导航至about:blank，隔离测试间的影响

你的cy.session回调中包含cy.visit('/')，但这段代码仅在首次创建会话时执行。当后续测试复用会话时，Cypress只会恢复会话的Cookie、LocalStorage等数据，不会重新执行cy.visit('/')，此时页面仍停留在about:blank，导致后续cy.get无法找到元素，触发报错。

另外，测试代码中存在括号拼写错误（[data-test=auth-card缺少闭合括号），这也会加剧断言失败的问题。

2. testIsolation: false导致第二个测试失败的原因 #

当设置testIsolation: false时，测试间会共享浏览器状态：

• 第一个测试执行完毕后，页面停留在登录后的状态
• 第二个测试开始时，cy.signin检测到会话已存在，直接跳过登录逻辑（不执行cy.visit和表单提交）
• 若应用的页面状态与会话数据未同步（比如未触发页面刷新验证登录状态），或第一个测试结束后未重置状态，就会导致后续操作不符合预期，最终测试失败。

3. 优化方案 #

方案一：修正signin命令，确保会话复用后页面状态正确 #

修改signin命令，通过onRestore钩子在会话恢复后强制导航到首页并验证登录状态，无论是否是首次创建会话：

Cypress.Commands.add('signin', (email, password) => {
  cy.session([email, password], () => {
    // 首次创建会话时执行完整登录流程
    cy.visit('/');
    cy.get('[data-test=signin-input-email]').type(email);
    cy.get('[data-test=signin-input-password]').type(password);
    cy.get('[data-test=signin-submit]').click();
    cy.get('[data-test=auth-card]').contains(email); // 修正括号拼写错误
  }, {
    // 会话恢复后执行，确保页面处于登录状态
    onRestore: () => {
      cy.visit('/');
      cy.get('[data-test=auth-card]').contains(email);
    }
  });
});

同时修正测试代码中的括号错误：

describe('signin', () => {
  it('submits signin form with valid data', () => {
    cy.signin('valid.email@example.com', 'validpassword123');
    cy.get('[data-test=auth-card]').contains('valid.email@example.com');
  });

  it('signs out', () => {
    cy.signin('valid.email@example.com', 'validpassword123');
    cy.get('[data-test=auth-menu]').click();
    cy.contains('Sign out').click();
    cy.get('[data-test=signin-input-email]').should('exist');
  });
});

方案二：保持testIsolation: true，简化会话逻辑 #

若无需跨测试共享状态，保持默认的testIsolation: true即可，在signin命令中先导航到首页，再判断是否需要执行登录流程：

Cypress.Commands.add('signin', (email, password) => {
  cy.visit('/');
  // 检查是否已登录，未登录则执行登录
  cy.get('body').then(($body) => {
    if ($body.find('[data-test=signin-input-email]').length > 0) {
      cy.get('[data-test=signin-input-email]').type(email);
      cy.get('[data-test=signin-input-password]').type(password);
      cy.get('[data-test=signin-submit]').click();
      cy.get('[data-test=auth-card]').contains(email);
    }
  });
  // 缓存登录状态，避免重复执行登录
  cy.session([email, password], () => {}, {
    validate: () => {
      cy.get('[data-test=auth-card]').contains(email);
    }
  });
});

方案三：关闭测试隔离时的状态管理 #

若必须关闭测试隔离，需在每个测试前后明确重置状态，避免测试间耦合：

describe('signin', { testIsolation: false }, () => {
  beforeEach(() => {
    // 每个测试开始前确保处于登录状态
    cy.signin('valid.email@example.com', 'validpassword123');
  });

  it('submits signin form with valid data', () => {
    cy.get('[data-test=auth-card]').contains('valid.email@example.com');
  });

  it('signs out', () => {
    cy.get('[data-test=auth-menu]').click();
    cy.contains('Sign out').click();
    cy.get('[data-test=signin-input-email]').should('exist');
    // 测试结束后重置回登录状态，避免影响后续测试
    cy.signin('valid.email@example.com', 'validpassword123');
  });
});

注意：关闭测试隔离会增加测试间的耦合性，除非有明确的性能需求，否则不推荐使用。

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