user interface - Cypress- Wait till element changes status

Question

I have some UI tests using Cypress, where there is an span element (#done-status) which initially has value '', followed by 'In Progress' and then 'Complete'. After it changes to 'Complete', I want to assert the value of another element (#failures) to be 0. The state change from empty string to In Progress and to Complete takes some time depending on some execution. How can I wait till it changes it's status. I tried random waits but since the element is already on the DOM, it doesn't wait for the timeout and it fails. Something like this :

it('should verify if the tests passed', () => {

    cy.get('#done-status')
        .should('have.value', '');

    cy.get('#done-status', { timeout: 10000 })
        .should('have.value', 'In Progress')

    cy.get('#done-status', { timeout: 300000 })
        .should('have.value', 'Complete');

    cy.get('.failures')
        .should('have.value', 0);

});

Is there a way so that it can wait till the state changes and at the end verify the number of failures.

Thanks

question from:https://stackoverflow.com/questions/65833819/cypress-wait-till-element-changes-status

Answer 1

Waitting for answers