Cypress如何在if条件判断中使用cy.contains方法

你不能直接把cy.contains写在if的同步条件里：Cypress所有命令都是异步入队执行的，调用后不会直接返回DOM元素，拿到的是链式调用对象，不存在可直接判断的length属性，同步判断永远拿不到正确结果。
另外你贴的示例代码判断逻辑写反了：length > 0代表元素存在，和你要的「指定名称不存在时才创建」的需求刚好相反，实际编写时要注意条件取反。

方案1：官方推荐写法（稳定性最高，适配异步渲染场景） #

这是Cypress官方文档给出的条件分支标准写法，先等待页面加载完成，再在回调内做同步DOM判断，不需要额外手动加固定等待时间：

// 等待页面主体加载就绪
cy.get('body').then(($body) => {
  // 在当前已渲染的DOM范围内查询目标元素
  const targetExist = $body.find('div.name').filter(':contains("Test 1")').length > 0;
  if (!targetExist) {
    // 不存在时执行创建逻辑
    cy.get('input.newName').click().type('Test 1');
    cy.get('div.createNewName > a').click();
    // 等待创建结果渲染，代替固定2秒等待，稳定性更高
    cy.contains('div.name', 'Test 1').should('be.visible');
  }
})

方案2：直接用Cypress捆绑的jQuery做同步查询（代码最简洁） #

如果已经确定页面DOM渲染完成（比如前面已经有步骤等待了页面加载完成/列表接口返回），可以直接用Cypress内置的jQuery做同步查询，代码更短：

// 前置步骤：确保页面已经渲染完成，比如等待列表接口返回
// cy.wait('@getNameListApi')
const targetExist = Cypress.$('div.name:contains("Test 1")').length > 0;
if (!targetExist) {
  cy.get('input.newName').click().type('Test 1');
  cy.get('div.createNewName > a').click();
  cy.contains('div.name', 'Test 1').should('be.visible');
}

• 所有Cypress DOM查询命令（cy.get/cy.contains/cy.find）都不能直接放在同步的if/for等判断、循环条件里，必须在.then()回调里拿到实际DOM元素后再做判断
• 尽量不要用cy.wait(固定毫秒值)做等待，固定等待要么因为网络/渲染慢导致等待时长不足，要么浪费测试时间，换成等待目标元素出现/接口返回的方式，用例稳定性会高很多

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