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

Solution 1

2022 here and tested with cypress version:

• "6.x.x", "7.x.x", "8.x.x", "9.x.x"

My solution:

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

Explanation:

In my case, I needed to watch a bit deeper what's going on. I started by pin the click action like this:

Then watch the console, and you should see something like:

Now click on line Mouse Events, it should display a table:

So basically, when Cypress executes the click function, it triggers all those events but somehow my component behave the way that it is detached the moment where click event is triggered.

So I just simplified the click by doing:

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

And it worked 🎉

Hope this will fix your issue or at least help you debug and understand what's wrong.

Solution 2

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!

Solution 3

https://github.com/cypress-io/cypress/issues/2928 helped me.

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

Solution 4

Whoever finds this problem, the official way of handling it is described here: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/

TLDR: What @jpvantuyl said, cypress clicks the button before the onclick event is there. The lib cypress-pipe will add a .pipe method that if followed by .should will retry a function until the condition is true or it times out.

Example:

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

Solution 5

Something I just learned from a colleague after none of the above worked for me and after hours of searching. Just blew my mind. Just add another .click()...

before:

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

In the left Cypress menu click on the action and you'll see the indicator that it clicks the correct part, but nothing happens. Do it manual in the browser and it works.

Fix:

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

and all of the sudden the string is clicked and test is moving on to the next page

View more solutions

Comments

[Anton]

I made more research and it seems similar issue: github.com/cypress-io/cypress/issues/695

[Kaushik NP]

Also add: cy.wait(150) : That is never a good idea. Cypress is based on async ideology, where wait should be implicit by querying for situations like elements becoming visible, etc.

[Anton]

I agree but in my specific case nothing else worked. And there is a post where multiple people have same type of issue. And for now i didnt found better solution. There is a url attached in answer.

[Emjey]

Not sure why this was downvoted, but this is the only answer that got my script working consistently

[Praveen Pandey]

Downvoted it because: 1. cy.wait() is never a solution 2. force:true does not guarantee the click to succeed

[Anton]

@PraveenPandey When you downvoting, please propose a better solution. Cypress is pretty new tool, and sometimes bad solution is better than no solution.

[jmbmage]

this worked for me too, for some reason it needs .trigger('mouseover'). before .click()

[Rob_vH]

There may be a race between the control showing up in the DOM, click event dispatch and another render bouncing it again. Browsers aren't perfect at this. I experience a 100% pass on local headless run, then 95% failure in CI pipeline where the machine is slower. On a button click. It would be best to have an ideal and sturdy await point but sometimes a wait will get you unblocked. +1

[Rob_vH]

Mouseover causes an implicit wait. :/ allows the rendering to settle before the click dispatch. Might not actually different that the wait() solution, just different implementation :)

[marcacyr]

Thank you for your contribution here! This fixed the issue I was hitting.

[Emidomenge]

@marcacyr I'm glad this was helpful :)

[Don Diego]

actually (nov 2021) that's the only way to make 15 clicks on a single button work (e.g. clicking next in a calendar showing months). All the other way will miss one or more clicks!

[EmirDev]

In my case, no matter how much time you cy.wait(). It didn't work. This was the only working solution for me.

[Stefanie Uhl]

Thanks, this helped me a lot. Neither click() or clickAndWait() or trigger('click') worked before. Only mouseover and click worked.

[Raju Penumatsa]

Thanks for your contribution here. I have been struggling to fix similar issue in my case

[Raju Penumatsa]

Could you please explain why it worked for you?

[dewey]

For me neither force or the accepted answer wored. Somewhere in between I found an answer that works. It triggers the mouse hover, before the click. This seems to do the trick: stackoverflow.com/a/58302240/8408576

[dewey]

This doesn't work for me. Somewhere in between I found an answer that works for me. It triggers the mouse hover, before the click. This seems to do the trick: stackoverflow.com/a/58302240/8408576

[German Quinteros]

Thank you, you save my day. I have an e2e test that clicks on elements which execute a redirection, then I execute a go back to the previous page and if I tried to click on the same element the redirection didn't work. Now, with the trigger('mouseover').click() it works. Thanks