Cypress测试问题：独立it{}块执行失败，合并为单个it{}块正常

核心原因 #

Cypress中每个it()测试块是完全独立的，执行完一个it()后，Cypress会自动重置浏览器状态：清除Cookie、LocalStorage，关闭当前标签页并重新打开一个干净的上下文。这意味着拆分后的每个it()都会从头开始执行，不会继承上一个it()的页面状态（比如已导航到PDP、购物车已有商品等），自然找不到依赖前置状态的元素。

而合并到单个it()时，所有步骤在同一个浏览器上下文连续执行，状态不会中断，因此能正常找到元素。

解决方案 #

根据测试需求，有两种合理的处理方式：

1. 让每个it()成为独立可运行的测试案例

每个it()需要包含完成自身测试目标所需的完整前置步骤，或者用钩子函数提取公共前置操作：

// 公共前置：每个测试前都初始化网站并导航到PLP
beforeEach(() => {
  cy.visit("https://www.bareperformancenutrition.com");
  cy.get('.js-mega-menu > .nav__menu-link').click();
});

it('验证用户可从PLP导航到产品PDP', () => {
  cy.xpath("//div[@class='collectionGrid__products']").xpath("//p[normalize-space()='Flight / Pre Workout']").click({force: true});
  // 增加验证步骤，确认已进入PDP
  cy.contains('Flight / Pre Workout').should('be.visible');
});

it('验证用户可点击ADD TO CART按钮添加商品到购物车', () => {
  // 先导航到PDP
  cy.xpath("//div[@class='collectionGrid__products']").xpath("//p[normalize-space()='Flight / Pre Workout']").click({force: true});
  cy.get('.add-to-cart-btn > .button').click({force: true});
  // 验证购物车计数更新
  cy.get('.header-extra__cartAnchor').should('contain', '1');
});

it('验证用户可点击右上角关闭按钮关闭购物车抽屉', () => {
  // 先完成添加商品到购物车的前置操作
  cy.xpath("//div[@class='collectionGrid__products']").xpath("//p[normalize-space()='Flight / Pre Workout']").click({force: true});
  cy.get('.add-to-cart-btn > .button').click({force: true});
  
  cy.get('.sidebar__headerClose').click();
  // 验证抽屉已关闭
  cy.get('.sidebar__headerClose').should('not.be.visible');
});

// 其余测试同理，确保每个it()是独立完整的场景

2. 用步骤拆分替代it()拆分（保持状态连续）

如果只是想提高代码可读性，而非创建独立测试案例，可使用cy.step()拆分步骤，所有逻辑仍在单个it()中：

it('完成商品购物车完整流程', () => {
  cy.step('从导航栏进入SUPPLEMENT分类PLP', () => {
    cy.visit("https://www.bareperformancenutrition.com");
    cy.get('.js-mega-menu > .nav__menu-link').click();
  });

  cy.step('从PLP导航到Flight / Pre Workout的PDP', () => {
    cy.xpath("//div[@class='collectionGrid__products']").xpath("//p[normalize-space()='Flight / Pre Workout']").click({force: true});
  });

  cy.step('点击ADD TO CTA按钮添加商品到购物车', () => {
    cy.get('.add-to-cart-btn > .button').click({force: true});
  });

  cy.step('点击右上角按钮关闭购物车抽屉', () => {
    cy.get('.sidebar__headerClose').click();
  });

  cy.step('点击导航栏购物车按钮打开抽屉', () => {
    cy.get('.header-extra__cartAnchor').click();
  });

  cy.step('使用数量 spinner 减少商品数量', () => {
    cy.get('[aria-label="decrease quantity for Flight / Pre Workout"]').click();
  });
});

这种方式既拆分了步骤，又保持浏览器状态连续，测试结果也会按步骤展示，便于定位问题。

3. 用cy.session()维持会话状态（可选）

如果需要在多个it()间保留特定状态（如购物车内容），可使用cy.session()保存会话上下文，避免重复执行前置操作：

beforeEach(() => {
  cy.session('product-cart-session', () => {
    // 一次性完成初始化和添加商品的操作，保存会话
    cy.visit("https://www.bareperformancenutrition.com");
    cy.get('.js-mega-menu > .nav__menu-link').click();
    cy.xpath("//div[@class='collectionGrid__products']").xpath("//p[normalize-space()='Flight / Pre Workout']").click({force: true});
    cy.get('.add-to-cart-btn > .button').click({force: true});
    cy.get('.sidebar__headerClose').click();
  });
  // 每次测试前恢复会话并访问网站
  cy.visit("https://www.bareperformancenutrition.com");
});

it('验证用户可点击导航栏购物车按钮打开抽屉', () => {
  cy.get('.header-extra__cartAnchor').click();
  cy.get('[aria-label="decrease quantity for Flight / Pre Workout"]').should('be.visible');
});

it('验证用户可使用数量 spinner 减少商品数量', () => {
  cy.get('.header-extra__cartAnchor').click();
  cy.get('[aria-label="decrease quantity for Flight / Pre Workout"]').click();
  cy.get('.quantity__input').should('have.value', '0');
});

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