如果您要查找的元素不存在，如何不破坏赛普拉斯测试答案

【问题标题】：How to not break Cypress tests if element you'r looking for is not exist如果您要查找的元素不存在，如何不破坏赛普拉斯测试
【发布时间】：2022-01-25 04:09:47
【问题描述】：

我在 DOM 中有类名为“okrSelectorSelect__value-container”的 div。

<div class="okrSelectorSelect__value-container"><div>

这个 div 是可选的。我想单击它并使用 IF IT EXIST 之后出现的块进行一些额外的测试。我正在尝试这个。

cy.get('.okrSelectorSelect__value-container').then(($higherObjectivePick) => {
 if ($higherObjectivePick.length > 0) {
  $higherObjectivePick.click();
 }
});

但是当块不在页面上时得到这个

这是我的解决方案，但看起来还有更漂亮的方法可以做到这一点。

 cy.get('body').then($body => {
    if ($body.find('.okrSelectorSelect__value-container').length > 0) { 
      cy.get('.okrSelectorSelect__value-container').click();
      cy.get('.okrSelectorSelect__option').eq(higherOrderObjectiveNumber).click();
    }
  });

【问题讨论】：

为两种不同的方式编写两个不同的测试怎么样？

标签： javascript reactjs testing cypress

【解决方案1】：

我通常会像你一样做，但是像这样为它创建一个自定义命令会更漂亮：

Cypress.Commands.add("clickIfExists",(containerId , ItemId)=>{
  cy.get('body').then($body => {
    if ($body.find(containerId).length > 0) { 
      cy.get(ItemId).click();
    }
  }); 
})

如果你想点击.okrSelectorSelect__option，你可以这样称呼它：

cy.clickIfExists(".okrSelectorSelect__value-container",".okrSelectorSelect__option")

【讨论】：

【解决方案2】：

您可以使用 jquery 运算符来检查元素的存在并将该函数包装如下，添加到您的 support.js 文件中：

Cypress.Commands.add("checkIfClassExists", (classToFind) => {
    return Cypress.$(classToFind).length>0
})

然后在你的测试中：

if (cy.checkIfClassExists('.okrSelectorSelect__value-container')) {
    //do something
} else {
    //do nothing 
}

【讨论】：