What is the correct way to wait for an element to be visible?

[MatiDiez]

Hi everyone. Given how the app I'm working with is built, how "dynamic" it is and the absolute lack of selectors, I have to look for a lot of elements by its content, but all of them begin with very standard html tags
examples:

cy.get('button[type=submit]').contains('Save')
cy.get('div').contains('div', 'Full list').parent().parent().find('input[type=checkbox]')

Most of this requiere the element to appear first so in order to fix it, I'm adding cy.wait() everywhere.
I've tried using timeouts but the problem is that, it does find elements because I have a bunch of buttons, and of course a bunch of "divs" so technically the cy.get() is successful, it is the chained method that fails.

How should I do this?

[herecydev]

cy.get and cy.contains will automatically wait until the element is visible in the DOM (up to a point of course), so these should work fine for what you need, in your examples that would be:

cy.contains("Save");
cy.contains("Full list");

It's not clear what your issue is, do you have a bunch of "Save" buttons that's causing cypress to eagerly match on the wrong button that you want? Obviously the trick here is to make the selector be unique otherwise it'll always find something that you don't want; ultimately that's going to be problematic if you have a lot of duplicates and everything is "bland" html (no data-testid, etc).