Not able to override default timeout while using explicit wait mechanism in cypress

Question

I am using cypress-wait-until plugin to apply explicit wait in our framework. When I use it and maximum time given is say 30000 milliseconds, so ideally it should wait maximum 300000 ms (30 seconds) for element to be visible but it timesout after 4 seconds which is a default timeout for cypress commands.

    cy.waitUntil(() => cy.get('div.tabs div:nth-child(3)').should('be.visible') ,{timeout:30000})

I would like to know what changes I should and in which file so that I can override default timeout prescribed for cypress. It would be great if community provides some solution in this regard.

Answer 1

If you want to use cy.waitUntil(), change cy.get() to jQuery. That way the only timeout active is the one provided to cy.waitUntil().

cy.waitUntil(() => {
  return Cypress.$('div.tabs div:nth-child(3):visible').length
}, {timeout:30000})

Answer 2

Have you tried increasing the global timeout to a value larger than your wait timeout in your cypress.json?

{
  "defaultCommandTimeout": 35000
}

Answer 3

Using the wait-until package isn't actually necessary, Cypress has built-in timeouts on each command. The package is also somewhat flaky in my experience.

You can just achieve what you describe just using this

cy.get('div.tabs div:nth-child(3)', {timeout:30_000}).should('be.visible')

To change the default, do as daun suggests if using Cypress v9 or less, or in the file cypress.config.js for versions above.

Or add the timeout as a parameter to the test

it('tests my framework', {timeout:30_000}, () => {

You can read more in the Cypress documentation.