赛普拉斯 - 检查按钮是否存在，如果存在则单击它答案

【问题标题】：Cypress - checking for the presence of a button and clicking on it if it is there赛普拉斯 - 检查按钮是否存在，如果存在则单击它
【发布时间】：2021-09-18 23:54:39
【问题描述】：

使用赛普拉斯我正在测试一种产品，该产品包含定期启动的自动保存功能。您无法保证何时会触发自动保存，因为它取决于许多因素。它还有一个手动保存选项，单击一个按钮#saveIcon，该按钮仅在自动保存运行之前出现并在之后隐藏（直到另一个更改需要保存）。

我想查询该页面，如果#saveIcon 可见，请单击它，但如果不可见则单击其他内容。当它不可见时，它似乎具有 CSS 属性 visibility: hidden。

由于 saveIcon 被强制隐藏，我尝试了这个：

          cy.get('#saveIcon')
            .then($button => {
                if ($button.is(':visible')) {
                    cy.wrap($button).click()
                } else {
                    cy.get('.otherButton').click()
                }
            })

我希望 .otherButton 被单击，但它试图单击 $button（以完成 IF 部分），而不是在 click() 上超时，因为图标不可见。我猜这个按钮对 Cypress 可见，但对我不可见。

我尝试切换问题，以测试它是否具有 CSS 属性 visibility: hidden 并单击 ELSE 选项，但无法计算出语法。

有什么想法吗？

非常感谢，

【问题讨论】：

你试过-if( Cypress.dom.isVisible($button) )选项吗？

标签： javascript css conditional-statements cypress visibility

【解决方案1】：

如果按钮对 jQuery ($button.is(':visible') === true) 可见，但对 Cypress (cy.wrap($button).click() // fails) 不可见，则 force 选项可能会使其工作。

请参阅click()，可能还有其他actionability 因素阻止点击。

cy.get('#saveIcon')
  .then($button => {
    if ($button.is(':visible')) {
      cy.wrap($button).click({ force: true })   // ignore actionability checks
    } else {
      cy.get('.otherButton').click()
    }
 })

如果自动保存可以被预知地触发（例如输入一些数据），则对每个分支的测试将为您提供更大的代码覆盖率。

如果自动保存间隔不可预测，请增加超时时间。

自动保存之前

it('shows manual save button after form is made dirty', () => {
  cy.get('input').type('change-the-value')     // make form dirty
  cy.get('#saveIcon', { timeout: 5_000 })
    .should('be.visible')                      // button is present within 5 seconds
})

自动保存后

it('hides manual save button after auto-save', () => {
  cy.get('input').type('change-the-value')     // make form dirty
  cy.get('#saveIcon', { timeout: 5_000 })
    .should('be.visible')                      // button is present within 5 seconds
  cy.get('#saveIcon', { timeout: 5_000 })
    .should('not.be.visible')                  // auto-save ran, button is not present 
})

如果自动保存是不可预测的（比如 5 次保存 3 次），您可以添加一个测试重试选项以重复测试 5 次，或者直到它通过

it('hides manual save button after auto-save', { retries: 5 }, () => {

【讨论】：

嗨@E Q，非常感谢您的回复。在上面的测试中，我已经确保 saveIcon 事先不是用户可见的，所以我根本不希望单击 $button - 存在的条件意味着语句的 ELSE 部分应该被执行（'.其他按钮'）。我对 :visible 的使用可能是问题所在，但如果按钮存在于某处但同时以某种方式隐藏，我不确定如何检查它并获得我正在寻找的答案！
那么，#saveIcon 按钮总是有visibility: hidden?
您好，不 - 只有在自动保存已运行时，它才具有该状态。当 scriptIsDirty 时，该图标对用户可见，并且似乎没有任何与其关联的可见性样式。自动保存运行后，脚本被认为是干净的，图标从视图中消失，在开发工具中看到 .not-visible {visibility: hidden}。
我想知道这个方法是否是为了测试visibility: hidden，如果找到，点击.otherButton，否则点击saveIcon，但这似乎也不起作用，再次它没有' t 似乎将按钮识别为 if ($button.is(':hidden')) { 并尝试调用 ELSE 操作！
好吧，这就是我的想法——按钮的可见性对应于自动保存周期和 scriptIsDirty。那么，您拥有的代码之前是什么？您是否以某种方式触发 scriptIsDirty ？ $button.is(':visible') 和/或 $button.is(':hidden') 将被快速评估，但 .should('be.visible') 和 .should('not.be.visible') 将在您设置的任何超时时间重试。

【解决方案2】：

你可以使用jQuery点击，

cy.get('#saveIcon')
  .then($button => {
    if ($button.is(':visible')) {
      $button.click()
    } else {
      cy.get('.otherButton').click()
    }
  })

但您总是会单击 #saveIcon 按钮而不是 .otherButton，因为 if 语句总是比自动保存完成并隐藏 #saveIcon 按钮要快。

您应该明确等待#saveIcon 被隐藏，然后单击另一个按钮。

cy.get('#saveIcon:hidden')
cy.get('.otherButton').click()

【讨论】：