赛普拉斯点击如果项目存在答案

【问题标题】：Cypress Click if item exist赛普拉斯点击如果项目存在
【发布时间】：2021-07-08 11:06:09
【问题描述】：

我需要一种方法来仅当页面上存在元素时轻松触发click() 事件。元素（确认模态对话框）本身存在的事实对我的测试来说不是问题，但这可能会阻止后续步骤。所以我只想在显示对话框时单击“确定”。

我尝试了类似的方法，但没有成功：

  cy.get('body').find("button[data-cy=sometag]").then(items => {
    if(items.length) {
       cy.get('button[data-cy=sometag]').click();
    }
  });

【问题讨论】：

这个元素button[data-cy=sometag]在网页上会存在，有时不存在吗？

标签： cypress

【解决方案1】：

如果您想测试模态框是否存在，但又不想让测试失败，请使用 jQuery 选择器。

const found = Cypress.$('button[data-cy=sometag]').length

模态框可能会在打开时生成动画，因此您需要重复检查几次，您可以在函数中执行此操作

function clearModal(selector, timeout = 1000, attempts = 0)
  if (attempts > (timeout / 100)) {
    return;                                  // modal never opened
  }
  if (!Cypress.$(selector).length)  {        // not there yet, try again
    cy.wait(100)
    clearModal(selector, timeout, ++attempts)
  else {
    Cypress.$(selector).click()             // modal is up, now close it
  }
}

clearModal('button[data-cy=sometag]')

【讨论】：

【解决方案2】：

如果你像cy.get('body').find("button[data-cy=sometag]") 这样使用查找，只要元素不存在，它就会失败。相反，您可以在 If 条件中使用 find 命令并检查其长度。

cy.get('body').then($body => {
    if ($body.find("button[data-cy=sometag]").length > 0) {
        cy.get('button[data-cy=sometag]').click();
    } else {
        //Do something
    }
})

除了body，您还可以使用相关元素的父元素，您肯定知道它每次都可见并出现在页面上。

【讨论】：