Cypress does not always executes click on element

Question

I am automating Google Calculator. And from time to time Cypress is not able to execute click on button. The tests click on buttons (0 to 9 ) and do some simple math operations. And in 30% chance it can not click on element and the test will fail.

I also recorded a video when issue appears.

Video here

My Project is located here: https://github.com/afiliptsov/test-project

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

I tried to use different locator. Initially i was using just ID ex(#cwbt15 ) but after i made more specific locator ( #cwbt15 > .cwbtpl > .cwbts) and still having same issue.

Does anyone knows why it happens and how to avoid such behavior?

The project structure is :

• cypress/PageObject.js - place where all elements declared.
• cypress/support/commands.js - place where function click created and verification of value getting updated.
• cypress/integration/functional/delete.spec.js - test which was on the video

Answer 1

For me this code worked:

Inside your click methods add : { force: true } It will make force click.

Also add: cy.wait(150) to beforeEach or before click where your test fails.

It is just workaround not a solution.

Link to Cypress Issue

Also i saw this alternative:

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

But it didnt work out for me. Maybe will be usefull for someone!