In my Cypress test, I am trying to click on a dropdown after clicking on a button in a pop up panel that was on top of the dropdown, in which this button would remove the pop up and make the dropdown available for interaction. I did not have any delays in between clicking the button and the dropdown.
The test was flaky; sometimes, the click was registered as successful, but the dropdown was not actually showing the values. I look at the console log Cypress output and saw the following classes:
But on another random run, the click actually gave the effect desired; the dropdown was actually showing the values. I also looked at the Cypress console log and saw that the “applied to” element is somewhat different, with extra classes:
What is the difference? If I apply a delay, then the behavior becomes consistent. But I realize delays are bad (makes the test run longer than necessary). What can I do to make the click always show the dropdown, without having to introduce delays?