Quick Tip: .wait() a Second

TL;DR - Add a .wait()

cy.get('YOUR-SELECTOR').wait(1000).click()

For the past week, I’ve been working on the simple task of automating the click of a tab within a page. This should be simple, right?

//Navigate to the page

//Click the tab on the page

//Click the button that displays within the tab contents

.click() failed to open the tab

.invoke() set the correct attribute but the clicked tab contents did not display

I applied breakpoints to the click action and watched each point in the code that triggered the click.

I added .trigger() and used mouseover, hover, and mousedown

.focus() was added.

At this point, I was throwing everything in my power to click. this. tab.

It wasn’t until I found this answer on Stack Overflow that I found my first clue.

cy.get('[role="button"][aria-haspopup="listbox"]').trigger('mouseover').wait(1000).click().click({force:true});

At first, I laughed. Not at the person but with them. My word! We’re just trying to click a thing! Then, for funsies, I applied their answer to my code.

The tab opened.

Happy to find a solution, but wanting to know what triggered the click, I stripped away each part that might not be necessary. Here’s the result:

cy.get('YOUR-SELECTOR').wait(1000).click()

All it took was a second.

I know, I know, as QA Engineers, we stress and strain not to add waits to our code. It’s a code smell. It will slow down the tests, etc. And, that’s correct. But, sometimes, in code and life, all you need is a second.

Hope this helps someone and saves you DAYS of searching.

🙏

Topics:Cypress, Automation, Testing, Troubleshooting, Community