Cypress 如何在使用 if 条件时检测某个元素是否可见？

Cypress 是一个前端自动化测试工具，它不直接支持传统的条件语句（如 if），因为它运行在异步的 JavaScript 环境中。在 Cypress 中进行条件判定通常需要依赖其提供的链式命令和断言。如果您想根据某个元素是否存在来执行不同的命令，可以使用 .then() 方法来访问当前命令队列的状态，并编写自己的逻辑。

以下是一个 Cypress 中根据元素存在来决定执行逻辑的例子：

javascript
// 检查元素是否存在
cy.get('body').then($body => {
  // 如果元素存在
  if ($body.find('.my-element').length) {
    // 元素存在时执行的代码
    cy.get('.my-element').click();
  } else {
    // 元素不存在时执行的代码
    // 例如：可以选择点击另一个按钮或者记录日志等
    cy.get('.other-button').click();
  }
});

在这个例子中，.then() 方法被用来访问 DOM 并对其进行检查。我们首先尝试获取 body 标签，然后在 .then() 的回调函数中检查我们感兴趣的 .my-element 类的元素是否存在。通过查找 .my-element 类的长度，我们可以判断元素是否存在来决定执行的逻辑。如果存在，执行一些操作（例如点击它），如果不存在，可能需要执行一些其他操作（例如点击一个替代的按钮或记录一条日志等）。这样，我们就能够根据页面上元素的存在与否来控制测试流程。

Cypress 允许 jQuery 处理 DOM 元素，因此这对您有用：

shell
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')

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

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

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

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

试试这个代码：

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

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

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

shell
if(isElementNotVisible) {
}

或者

shell
if(isElementVisible) {
}