Cypress: Alternative for command 'wait'

Viewed 469

I am looking for an alternative to the wait command.

As we all know, a page/component/etc. does not take the same time to load or simply be available every time it is called. For this reason, I cannot rely on the 'wait' command with constant time specification.

So I am looking for an alternative.

Some people on the internet write that the command 'then' helps to wait until the condition is fulfilled. Unfortunately, the following alternative does not work in my case:

cy.get(#element).should('exist').then(() =>{ 
   cy.get(#element).click(); 
});

I am looking forward to your messages and alternatives to 'wait'. Many greetings Janni

6 Answers

You can chain the assertion and apply a timeout like this:

cy.get('#element',{timeout: 5000}).should('be.visible').click()

What this will do is wait and re-query till 5 seconds till the element is visible on the DOM and then click it.

Thank you for your answer.

The problem was that the default timeout had to be increased.

Cypress.config('pageLoadTimeout', 300000);

I prefer the above answer by Alapan Das instead of using cy.wait(). One more way you can do this if your url is getting changed on click element then.

cy.get(#element1).click();
cy.url().should('include','https://xyx.com/abc');   //cypress wait untill this page loads
cy.get(#element2).click();

Refer This question for more details :

Waiting for a page to load - Cypress

Depending on the app, there a many ways to check your page/component/etc is loaded before invoking any actions or assertions. Here are a few examples to use for some scenarios:

// wait for page load
cy.location('pathname').should('include','/new-path/') // check url is changed
cy.get('.element-on-new-page-only').should('be.visible') // check element is visible on new page

// wait for component load
cy.get('.loading', { timeout: 10000 }).should('not.exist') // sometimes apps have loading icon/screen so we wait until it is gone with a passed timeout option
cy.get('.component-finished-loading').should('be.visible')

// wait for component to disappear
cy.get('.component-to-disappear').should('not.exist') // can use 'not.be.visible' if app hides it instead

// wait for text update
cy.get('.element-new-text').should('include.text', 'new text') 

but all this doesnt work for me.

In my case it is a AG-Grid table. first I click on the header of column 'X' for sorting.

That is, the value in the row before sorting was B. After sorting, the same row contains A. cypress automates the step so quickly that it does not even notice that the row has been sorted. I would use a 'wait' of 1 second, then he would perceive the sorting.

Code:

 cy.get(createColId('name'), {timeout: 10000}).eq(1).should('include.text', 'A');

Error Timed out retrying after 4000ms: expected '<div.ag-cell...>' to include text 'A', but the text was 'B'

My problem is not to wait till the page is successfully loaded, but till the content exist and is available/clickable etc.

With this command a small improvement is noted but is not the solution of my problem.

Cypress.config('defaultCommandTimeout', 50000);
Related