Cypress 并不总是执行点击元素

Question

我正在自动化谷歌计算器。有时赛普拉斯无法执行单击按钮。测试单击按钮（0 到 9 ）并执行一些简单的数学运算。并且有 30% 的机会它无法点击元素并且测试将失败。

出现问题时，我还录制了视频。

视频在这里

我的项目位于：https : //github.com/afiliptsov/test-project

To run the test run : "npm run test:e2e:functional"

我尝试使用不同的定位器。最初我只使用 ID ex(#cwbt15)，但在我制作了更具体的定位器（#cwbt15 > .cwbtpl > .cwbts）之后仍然有同样的问题。

有谁知道为什么会发生这种情况以及如何避免这种行为？

项目结构是：

• cypress/PageObject.js - 声明所有元素的地方。
• cypress/support/commands.js - 创建函数点击和更新值验证的地方。
• cypress/integration/functional/delete.spec.js - 视频中的测试

Answer 1

对我来说，这段代码有效：

在您的点击方法中添加：{ force: true }它将强制点击。

还要添加：cy.wait(150)to beforeEach 或before click where your test failed。

这只是解决方法而不是解决方案。

链接到赛普拉斯问题

我也看到了这个替代方案：

cy.get('#query-btn').invoke('width').should('be.gt', 0)

cy.get('#query-btn').invoke('width').should('be. greaterThan', 0)

但这对我没有用。也许对某人有用！

Answer 2

谁发现这个问题，官方的处理方法如下： https: //www.cypress.io/blog/2019/01/22/when-can-the-test-click/

TLDR：@jpvantuyl 所说的，cypress 在 onclick 事件发生之前单击按钮。该库cypress-pipe将添加一个.pipe方法，如果紧随其后，.should将重试一个函数，直到条件为真或超时。

例子：

cy
  .get(numbers.result.idLocator)
  .pipe($el => $el.click()) // try this
  .pipe(
    // next line will make assertions on the element returned by this pipe
    () => cy.get(calculatorScreen.resultOutput.idLocator)
  )
  .should("contain", "0"); // until this happens or times out

Answer 3

我刚刚从一位同事那里学到了一些东西，因为上述方法都不适合我，并且经过几个小时的搜索。简直让我大吃一惊。只需添加另一个 .click()...

前：

cy.contains('some string').click(); 

在左侧 Cypress 菜单中单击该操作，您将看到指示符表明它单击了正确的部分，但没有任何反应。在浏览器中手动执行此操作并且可以正常工作。

使固定：

cy.contains('some string').click().click();

突然，该字符串被单击，测试正在进入下一页

Answer 4

这可能是因为应用程序通过 JavaScript 将行为附加到按钮。当该脚本需要很长时间才能执行时，它允许赛普拉斯在OnClick 事件出现之前单击按钮。

请参阅：https ://www.cypress.io/blog/2018/02/05/when-can-the-test-start/

Cypress 建议跟踪底层 JS 何时就位，如下所示：

function waitForAppStart() {
  // keeps rechecking "appHasStarted" variable
  return new Cypress.Promise((resolve, reject) => {
    const isReady = () => {
      if (appHasStarted) {
        return resolve()
      }
      setTimeout(isReady, 0)
    }
    isReady()
  })
}
it('greets', () => {
  cy.visit('app.html', {
    onBeforeLoad: spyOnAddEventListener
  }).then(waitForAppStart)
  // all other assertion will run only when
  // the application has started
  cy.get('#name').type('Cypress{enter}')
  cy.contains('#answer', 'Cypress')
})

Answer 5

https://github.com/cypress-io/cypress/issues/2928 帮助了我。

cy.get('[data-qa="select_workers-list"]'.contains('+ New Worker').trigger('mouseover').click();

Answer 6

2021 在这里，使用柏树版本"6.x.x"或"7.x.x".

我的解决方案：

cy.get("YOUR_SELECTOR").trigger("click");

解释：

就我而言，我需要更深入地观察正在发生的事情。我开始click像这样固定动作：

然后观察控制台，你应该看到如下内容：

现在点击 line Mouse Events，它应该显示一个表格：

所以基本上，当 Cypress 执行该click函数时，它会触发所有这些事件，但不知何故我的组件的行为方式就像它在click event被触发的那一刻分离的方式。

所以我只是通过执行以下操作来简化点击：

cy.get("YOUR_SELECTOR").trigger("click");

它起作用了

希望这可以解决您的问题，或者至少可以帮助您调试并了解问题所在。