如何在Cypress中处理元素存在与不存在的两种场景？

你的问题核心在于cy.get()默认会在找不到元素时抛出断言错误，直接终止命令链，导致永远进入不了后续的then块。要实现分支逻辑，你需要改用不会抛出异常的方式检查元素存在性，以下是两种可靠的实现方案：

方案一：通过文档对象直接查询元素 #

利用cy.document()获取页面文档，再用Cypress内置的jQuery选择器直接查询元素，无论元素是否存在，都会进入then块执行分支逻辑：

cy.document().then(doc => {
  // 在文档中查询目标元素
  const $targetElement = Cypress.$('.ant-breadcrumb-link', doc);
  
  if ($targetElement.length > 0) {
    // 元素存在时的操作
    cy.log('Element exists');
    // 可以用cy.wrap包装jQuery对象，继续使用Cypress命令链式操作
    cy.wrap($targetElement).click();
  } else {
    // 元素不存在时的操作
    cy.log('Element does not exist');
    // ... 执行对应逻辑
  }
});

方案二：临时禁用cy.get()的失败断言 #

如果需要等待元素可能出现（比如页面加载延迟），可以给cy.get()添加fail回调临时捕获错误，实现分支逻辑：

cy.get('.ant-breadcrumb-link', { timeout: 2000 })
  .then($element => {
    // 元素存在时的操作
    cy.log('Element exists');
    // ... 执行操作
  })
  .fail((error) => {
    // 捕获找不到元素的错误，执行不存在时的逻辑
    cy.log('Element does not exist');
    // ... 执行对应逻辑
    // 返回false避免Cypress将该错误标记为测试失败
    return false;
  });

关键说明 #

• 方案一无需等待，会立即检查元素状态，适合不需要等待元素加载的场景；
• 方案二可以设置超时等待元素出现，适合元素可能延迟渲染的场景，注意要在fail回调中返回false，否则测试会被标记为失败。

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