Fixing Cypress flakiness
Press enter or click to view image in full size
I recently had a Cypress test that was very flaky. Sometimes it would pass and sometimes it would fail.
One day, after three failed deployment pipelines thanks to this test, I decided to improve it once and for all.
The Cypress error I was getting didn’t tell me a lot. The #results DOM element wasn’t found, but this could have been due to many things.
When I opened the test, it looked something like this:
Can you spot the problem?
Spoiler — the issue is on line four: cy.wait(1000).
The search bar performs an API call to the server. However, in our CI environment, this API call was very slow. This would result in Cypress searching for the “Hand Sanitizer Pro” product while the API was still loading.
Improving the Test
A better way to solve this is to let Cypress wait for the API call to finish.