Cypress中判断div.userId是否存在于DOM且避免测试失败的方法

Cypress 默认的 cy.get() 命令会自动断言元素存在且可见，一旦不满足就直接终止测试。要实现先判断元素状态再执行对应逻辑的需求，可以通过以下两种方式处理：

方法一：使用 Cypress.$（jQuery 别名）直接查询 DOM #

利用 Cypress.$ 可以同步查询DOM元素，不会触发Cypress的断言失败，适合快速判断元素是否存在：

// 同步查询DOM中的div.userId元素
const $userId = Cypress.$('div.userId');

if ($userId.length > 0) {
  // 元素存在，验证可见性并执行后续操作
  cy.wrap($userId).should('be.visible');
  // 这里添加元素可见后的业务逻辑
} else {
  // 元素不存在，执行触发显示的操作（替换为实际触发元素的选择器）
  cy.get('button.show-user-btn').click();
  // 等待元素显示并验证
  cy.get('div.userId').should('be.visible');
}

方法二：通过 cy.document() 查询DOM节点 #

如果不想依赖jQuery，可以直接操作原生DOM：

cy.document().then(doc => {
  const userIdElement = doc.querySelector('div.userId');
  
  if (userIdElement) {
    // 元素存在，验证可见性
    cy.wrap(userIdElement).should('be.visible');
  } else {
    // 元素不存在，触发显示逻辑
    cy.get('a.toggle-user-info').click();
    // 确保元素最终显示
    cy.get('div.userId').should('be.visible');
  }
});

注意事项 #

• 所有Cypress命令必须在命令链中执行，不能在普通的if-else中直接调用非Cypress异步操作，否则会导致执行顺序混乱。
• 如果需要判断元素是否可见而非仅存在，可以在获取元素后用 .should('be.visible') 断言，或者通过原生DOM的 getBoundingClientRect() 检查元素是否在视口中。

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