how to replace explicit wait calls in cypress?

Question

I am facing several situations where an element can't be clicked using cy.get().click() just because the elements have not loaded. However, if i add even the smallest of waits like cy.wait(100); the elements become clickable and my code runs fine.

Can this practice of explicitly calling cy.wait() be avoided?

I think if I can somehow set a fixed wait of cy.wait(100) i.e 0.1ms between all the steps my issue would be addressed but I don't know how to do it.

Answer 1

I've found a solution to this, posting it for others to use later

 cy.get('<your-selector-here>').should('be.visible').then(   ($el)  =>  {   $el.click() }    )

you can simply use this assertion .should('be.visible') to replace the explicit wait calls.

However, there's a catch to it; this only works for the cases where you're 100% sure that the element would appear. If the element does not appear, the assertion will simply fail and the test won't continue further.