Cypress测试中实现元素二选一校验遇报错，求解决方案

你的代码失败的核心原因是：当div.table-row.table-row-hover元素不存在时，cy.get()会因为超时找不到元素直接抛出错误，根本无法进入后续的then回调执行else分支。Cypress的cy.get()默认会强制等待目标元素出现，超时则终止测试，不会返回空数组让你判断。

解决方案1：使用optional参数（Cypress 12+ 推荐） #

Cypress 12及以上版本支持cy.get()的optional: true参数，允许元素不存在时返回空数组而非报错，完美适配你的分支判断逻辑：

it.only("Test", () => {
  const query = "ExampleText"; 
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`);
  
  // 添加{ optional: true }，允许元素不存在时返回空数组
  cy.get("div.table-row.table-row-hover", { optional: true }).then(($elements) => {
    if ($elements.length > 0) {
      // 简化文本检查：用Cypress内置断言替代手动循环
      expect($elements.text().toLowerCase()).to.include(query.toLowerCase());
    } else {
      cy.get('i[class="far fa-empty-set"]').should("exist");
    }
  });
});

解决方案2：原生DOM查询（兼容旧版本Cypress） #

如果你的Cypress版本低于12，可以通过cy.document()获取文档对象，再用原生DOM查询或Cypress.$检查元素，避免cy.get()的强制等待逻辑：

it.only("Test", () => {
  const query = "ExampleText"; 
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`);
  
  cy.document().then(doc => {
    // 直接查询文档中的元素，不存在时返回空集合
    const $elements = Cypress.$('div.table-row.table-row-hover', doc);
    if ($elements.length > 0) {
      let textFound = false;
      $elements.each(($el) => {
        if ($el.text().toLowerCase().includes(query.toLowerCase())) {
          textFound = true;
        }
      });
      expect(textFound).to.be.true;
    } else {
      cy.get('i[class="far fa-empty-set"]').should("exist");
    }
  });
});

额外优化建议 #

• 文本检查可以用cy.wrap($elements).should('contain.text', query, { matchCase: false })替代手动循环，更符合Cypress的断言风格。
• 若搜索后页面加载需要时间，可以在type(${query}{enter})后添加cy.wait(500)（或根据实际情况调整等待时间），确保页面状态稳定后再检查元素。

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