0

In this Cypress test I am attempting to utilize the cy.waitUntil npm package to wait for the non existence of a loading spinner to then continue running the tests without the risk of race conditions failing the tests in CI (currently the tests are failing because commands are made on the page before the components are all finished loading.

in this first attempt i tried to make the assertion for the status of the loading spinner by getting it from the attribute "data-cy-isLoading" on the wrapper div who's value is dependent on the same logic that renders the spinner.

cy.waitUntil(
  () => {

    let stillLoading = null
    cy.get('[data-cy-isLoading]')
      .then(val => (stillLoading = val[0].attributes[1].value))
      .then(() => {
        if(stillLoading === 'false'){
           return true
        }
      })
      
  },
  {
    timeout: 8000,
    description: 'Await loading spinner',
  }
)

This attempt failed every way I tried adjusting it, if the if(stillLoading === 'false') condition was met and return True was hit, the cy.waitUntill command would still continue retry indefinitely without exiting the waitUntil command and continuing with the tests

this variation also did not work.

cy.waitUntil(
  () => {
    let done;
    let stillLoading;
    cy.get('[data-cy-isLoading]')
      .then(val => (stillLoading = val[0].attributes[1].value))
      .then(() => {
        if(stillLoading === 'false'){
           done = true
        }

      })
      done ? expect(done).to.be.true : false
  },
  {
    timeout: 8000,
    description: 'Await loading spinner',
  }
)

next I tried to simply assert on the existence of the spinner its self by using a timeout on a command/assertion.

!!cy.get('[data-cy="spinningCircle"]', {timeout: 10000}).should('not.be.visible')

!!cy.get('[data-cy="spinningCircle"]', {timeout: 10000}).should('not.exist')

These also did not work as they failed as soon as the element [data-cy=spinningCircle] was not able to be located

Justin Oswald
  • 169
  • 1
  • 5
  • 13

1 Answers1

0

I've done this sort of thing successfully like this before

    cy.waitUntil(() => {
        return cy.get('[data-cy-isLoading]:visible')
        .should('have.length.lessThan', 1):   
    },
    {
        errorMsg: 'loading indicator still present after 10000ms',
        timeout: 10000,
        interval: 500
    });
Bill Carter
  • 9
  • 2