Cypress 13.0中before/afterEach断言异常问题排查求助

问题根源分析 #

你的测试代码存在两个核心问题，导致在Cypress 13.0中出现执行异常：

• 测试初始状态不一致：before钩子仅在整个测试套件开始时执行一次cy.visit，后续测试依赖afterEach的登出操作回到登录页。如果afterEach中的登出流程未完全执行（比如元素加载延迟、点击未触发），下一个测试的beforeEach执行时页面可能处于非登录页状态，导致找不到用户名输入框等元素触发报错。
• 未确保元素可交互状态：所有元素操作（输入、点击）前未添加状态断言，Cypress 13.0对元素交互的时机要求更严格，若元素未完全加载/可交互就执行操作，会导致随机失败。

修复后的代码 #

/// <reference types="cypress"/>

describe("Validate login functionality", () => {
  // 每个测试用例开始前重新访问登录页，确保初始状态一致
  beforeEach(function () {
    cy.visit("https://www.saucedemo.com/");
    // 确认页面加载完成，元素可交互
    cy.get("#user-name").should('be.visible').type("standard_user");
    cy.get("#password").should('be.visible').type("secret_sauce");
    cy.get("#login-button").should('be.enabled').click();
    // 确认登录成功，进入库存页
    cy.url().should('include', '/inventory.html');
  });

  it("Validate link", () => {
    cy.get("a[id='item_4_title_link'] div[class='inventory_item_name']")
      .should('be.visible')
      .click();
    // 可选：确认跳转至商品详情页
    cy.url().should('include', '/inventory-item.html');
  });

  it("Validate Add to cart", () => {
    cy.get("#add-to-cart-sauce-labs-backpack")
      .should('be.visible')
      .click();
    // 可选：确认购物车数量更新
    cy.get(".shopping_cart_badge").should('have.text', '1');
  });

  afterEach(function () {
    // 确保汉堡菜单按钮可点击
    cy.get("#react-burger-menu-btn").should('be.visible').click();
    // 确保侧边栏加载完成，登出链接可点击
    cy.get("#logout_sidebar_link").should('be.visible').click();
    // 确认登出成功，回到登录页
    cy.url().should('equal', 'https://www.saucedemo.com/');
  });
});

关键优化点 #

• 将cy.visit移至beforeEach，保证每个测试用例都从全新的登录页开始，彻底隔离测试状态。
• 所有元素操作前添加.should('be.visible')或.should('be.enabled')断言，确保元素处于可交互状态后再执行操作。
• 在登录、登出流程后添加URL断言，验证页面跳转结果，避免流程未完成就进入下一步。
• 可选添加测试结果断言（如购物车数量、页面跳转），让测试逻辑更完整，也便于定位问题。

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