Is {force: true} the only way for invisible elements in Cypress?

Question

Is there any alternative way apart from {force: true} on click & type function for the elements not visible in the web application using Cypress?

Using {force:true} on each & every function doesn't seem to be an ideal way. Any thoughts team?

Answer 1

You can use .should('be.visible') like:

cy.get('#element-id').should('be.visible').click()

You can use .wait() like:

cy.get('#element-id').wait(2000).should('be.visible').click()

You can use .then() like;

cy.get('#element-id').then(($el) => {
    if ($el.is(':visible')) {
        $el.click()
    }
})