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

Question

我想知道某个元素是否可见。我不知道该怎么做。 我知道我们可以运行这个：

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

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

用例：

我想仅在侧边栏不可见时通过单击按钮来打开侧边菜单。

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

这可能吗？

我非常感谢您的任何贡献。

提前致谢

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');
    }
});

Answer 2

您还可以使用我的插件

cypress-if

来编写条件命令链

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

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

Answer 3

尝试这个代码：

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

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

然后将这两种方法与 if 语句一起使用，如下所示：

if(isElementNotVisible) {
}

或

if(isElementVisible) {
}

Answer 4

cy.get(".insurance-component__list").then(ins=>{
        if(ins.is(':visible'))
        {  
            cy.log("in if loop")
            cy.get(this.ele_isnurance).click({force: true})
         }
         else{
            assert.isOk('everything','everything is OK');
         }
    })

无法工作，出现失败错误