如何在Cypress中创建基于DOM元素存在判断的条件测试

你写的条件判断永远生效，原因是jQuery的find()方法不管找没找到元素，都会返回jQuery对象，JavaScript里对象类型的值永远为真，哪怕匹配元素数量为0，if分支也会进入，最终触发元素不存在的报错。

it("something test", () => {
  cy.get("body").then(($body) => {
    // 必须通过length属性判断元素是否存在，大于0才代表匹配到元素
    if ($body.find('button[name="button-row-add"]').length > 0) {
      cy.get('button[name="button-row-add"]').click();
      cy.get('input[name="newValue"]').type("Cypress Test String");
      cy.get('button[name="submit-dimension"]').click();
      cy.wait(500);
    }
  });

  cy.get(".table-cell").each(($el) => {
    cy.wrap($el).dblclick();
    // 修正别名注册和引用的写法错误
    cy.get("[class^=form-cell]").as("form").should("exist");
    cy.get("@form").find('textarea[name="value"]').type("Cypress Sell Test");
    cy.get("@form").find('button[aria-label="submit-button"]').click();
  });
})

• Cypress本身不支持直接用内置命令做条件分支判断，因为cy.get()自带重试和断言失败逻辑，元素不存在时会直接抛错终止用例，正确做法是先拿到静态的父元素jQuery对象（比如这里的body），再用jQuery的find方法查找目标元素，通过返回对象的length属性判断是否存在。
• 注册别名后要通过cy.get('@别名')的格式引用，你原来写的cy.wrap("@form")只会把字符串@form当成选择器去查找元素，不会解析之前注册的别名。
• 如果目标按钮是异步渲染的，可以在获取body前加对应接口的等待，或者给判断逻辑增加超时时间，避免元素还没加载完成就被误判为不存在。

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