关于Cypress中before钩子的功能误解与配置咨询

核心原因 #

Cypress 默认开启**测试隔离（testIsolation）**机制，每个 it 测试块执行完毕后，会自动清除页面状态、Cookie、LocalStorage 等所有上下文。这意味着根级或 describe 块内的 before 钩子仅在第一个 it 执行前加载页面，后续 it 执行时上下文已被重置，自然无法访问之前加载的页面。

解决方案 #

1. 全局关闭测试隔离 #

修改 cypress.config.js 配置，将 testIsolation 设置为 false，这样所有测试块之间会共享上下文，before 钩子加载的页面会在所有 it 中复用：

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    testIsolation: false,
    // 其他原有配置...
  },
});

之后根级 before 钩子的写法即可实现一次加载、多测试复用：

before(() => {
  cy.visit('localhost:3000');
});

it('测试首页标题', () => {
  cy.title().should('eq', '预期标题');
});

it('测试首页导航', () => {
  cy.get('nav').should('be.visible');
});

⚠️ 注意：关闭隔离后，测试之间会互相影响，比如某个 it 修改了页面内容，后续 it 会基于修改后的状态执行。若需要保证测试独立性，需在 afterEach 中手动重置状态（如 cy.reload() 或重置表单）。

2. 针对单个测试块关闭隔离 #

如果不想全局关闭隔离，可在特定 describe 块内单独配置：

describe('首页测试组', { testIsolation: false }, () => {
  before(() => {
    cy.visit('localhost:3000');
  });

  it('测试首页标题', () => {
    cy.title().should('eq', '预期标题');
  });

  it('测试首页导航', () => {
    cy.get('nav').should('be.visible');
  });
});

关于 beforeEach 的行为解释 #

根级或 describe 块内的 beforeEach 都会在每个 it 前执行，这是 Cypress 默认隔离机制下的正常行为——因为每个 it 都需要干净的上下文，所以每次都会重新加载页面。你提到的“仅放入 describe 块内行为符合预期”，本质是该场景下你需要每个测试前重新加载页面，而根级 beforeEach 会作用于所有测试，导致整体耗时增加。

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