Cypress：如何使用If条件判断元素是否可见？

Question

我想知道一个元素是否可见，但我不确定如何做到这一点。 我知道我们可以运行以下命令：

cy.get('selector').should('be.visible')

但如果该元素不可见，则测试会失败。所以我只想要一个布尔值，表示元素不可见，这样我就可以通过if条件来决定。

用例：

我想通过单击按钮打开侧边栏菜单，但仅在侧边栏不可见时才能这样做。

if(sidebarIsInvisible){
   cy.get('#sideMenuToggleButton').click();
}

这是可能的吗？

非常感谢任何贡献。

提前致谢。

- Ayyaz Zafar

---

请注意，Cypress文档建议不要进行条件测试，除非您有一个稳定的真相来源来检查您的DOM。这是因为DOM始终在变化。请参见https://docs.cypress.io/guides/core-concepts/conditional-testing#The-problem。有几种可供选择的策略：https://docs.cypress.io/guides/core-concepts/conditional-testing#The-strategies。 - majorobot

Answer 1

Cypress允许jQuery与DOM元素一起工作，因此这对您有用：

cy.get("selector_for_your_button").then($button => {
  if ($button.is(':visible')){
    //you get here only if button is visible
  }
})

更新：您需要区分按钮存在和按钮可见之间的区别。下面的代码区分了3种不同的情况（存在且可见，存在但不可见，不存在）。如果您想要在按钮不存在时通过测试，只需执行assert.isOk('everything','everything is OK')

cy.get("body").then($body => {
    if ($body.find("selector_for_your_button").length > 0) {   
    //evaluates as true if button exists at all
        cy.get("selector_for_your_button']").then($header => {
          if ($header.is(':visible')){
            //you get here only if button EXISTS and is VISIBLE
          } else {
            //you get here only if button EXISTS but is INVISIBLE
          }
        });
    } else {
       //you get here if the button DOESN'T EXIST
       assert.isOk('everything','everything is OK');
    }
});

- DurkoMatko

---

感谢您的回复。但是，如果找不到按钮，则测试将失败。但我不想让测试失败。 - Ayyaz Zafar

我已更新我的回答，区分了3种情况（按钮存在且可见，按钮存在但不可见，按钮根本不存在）。刚在本地测试了代码，应该可以工作。如果您只想在按钮根本不存在的情况下通过测试，请使用 assert.isOk('everything','everything is OK');。希望这可以帮到您！ - DurkoMatko

我还没有尝试过，但听起来不错。我很快就会实现它。 但是我有一个问题。这个方法是异步的还是同步的？我的意思是，如果我在最后一行之后添加另一行cy.get()...，那么它会等待还是立即运行而不等待前面的代码？ - Ayyaz Zafar

它是异步的。整个Cypress都是异步的（我建议您在此处阅读更多信息-https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Asynchronous）。这意味着在cy.get之后添加行将“立即”运行。如果您想要等待，可以将其放入我提供的代码中的.then块中。无论如何，这已经是一个不同的话题。我认为问题的答案应该已经完成了。 - DurkoMatko

@AyyazZafar，您为什么没有接受答案呢？我认为这个问题已经得到了所有的回答，是吗？ - DurkoMatko

Answer 2

您还可以使用我的插件cypress-if编写条件命令链。

cy.get('...').if('visible').click()

阅读https://glebbahmutov.com/blog/cypress-if/

- gleb bahmutov

Answer 3

尝试这段代码：

isElementVisible(xpathLocater) {
        this.xpath(xpathLocater).should('be.visible');
};

isElementNotVisible(xpathLocater) {
        this.xpath(xpathLocater).should('not.exist');
};

然后像下面展示的那样，使用这两种方法和if语句：

if(isElementNotVisible) {
}

或者

if(isElementVisible) {
}

- Sudheer Singh

---

当元素不可见时，它会出现断言错误。 - paul

当元素不可见时，它会出现断言错误。 - undefined

是的，它会报错，因为上面的代码是为了捕获这些错误而编写的。 - Sudheer Singh

是的，它会报错，因为上面的代码是为了捕捉这些错误而编写的。 - undefined