如何使用 Cypress.io 检查元素是否存在

Question

如何检查元素是否存在，以便在元素存在时执行某些步骤。否则，如果元素不存在，则可以执行某些不同的步骤。

我尝试了类似下面的方法，但没有用：

 Cypress.Commands.add('deleteSometheingFunction', () => {
  cy.get('body').then($body => {
    if ($body.find(selectors.ruleCard).length) {
      let count = 0;
      cy.get(selectors.ruleCard)
        .each(() => count++)
        .then(() => {
          while (count-- > 0) {
            cy.get('body')
            // ...
            // ...
          }
        });
    }
  });
  });

我正在寻找一个简单的解决方案，它可以与简单的 javascript if else 块或承诺的 then() 部分合并

类似于 Webdriver 协议的以下实现：

1. driver.findElements(By.yourLocator).size() > 0
2. 检查等待中元素的存在

好心提醒。谢谢

原文由 user2451016 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

赛普拉斯的所有步骤都是异步的，因此您应该在命令文件或页面对象文件中创建通用功能，,..

     export function checkIfEleExists(ele){
    return new Promise((resolve,reject)=>{
        /// here if  ele exists or not
        cy.get('body').find( ele ).its('length').then(res=>{
            if(res > 0){
                //// do task that you want to perform
                cy.get(ele).select('100').wait(2000);
                resolve();
            }else{
                reject();
            }
        });
    })
}

// here check if select[aria-label="rows per page"] exists
cy.checkIfEleExists('select[aria-label="rows per page"]')
.then(e=>{
        //// now do what if that element is in ,,..
        })
.catch(e=>{
    ////// if not exists...
    })

原文由 Manthan Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我只想补充一点，如果您决定通过检查 cy.find 命令的 .length 属性来执行 if 条件，则需要尊重赛普拉斯的异步性质。

示例： 尽管存在 appDrawerOpener 按钮，但以下条件评估为 false

     if (cy.find("button[data-cy=appDrawerOpener]").length > 0)    //evaluates as false

但这一个评估为真，因为 $body 变量已经解决，因为你在 .then() 承诺的一部分：

     cy.get("body").then($body => {
        if ($body.find("button[data-cy=appDrawerOpener]").length > 0) {
            //evaluates as true
        }
    });

在 赛普拉斯文档中阅读有关条件测试 的更多信息

原文由 DurkoMatko 发布，翻译遵循 CC BY-SA 4.0 许可协议