When I run Cypress, the page of my application shows the loading spinner spinning indefinitely. While it is spinning the other components of the page are not displayed, so I need this spinner to disappear.

What I did

it('should wait spinner dissapears', function () {
        cy.waitUntil(function () {
            return cy.get('im-loader.hydrated')

but Cypress times out retrying im-spinner.hydrated not to be visible

when I replace .should(not.be.visible) to should('not.exist') Cypress also times out: Expected <im-spinner.hydrated> not to exist in the DOM, but it was continuously found. This is the HTML code

enter image description here

Is there any way to wait for the spinner to disappear and load correctly the page? This is the Test runner log enter image description here

  • Why is the spinner there in the first place? Are you waiting for some network request? If so, perhaps you can wait for that instead of some DOM element.
    – pavelsaman
    Mar 16, 2021 at 20:22
  • i am new to cypress so just a question the spinner loads indefinitely only when using cypress ?
    – PDHide
    Mar 16, 2021 at 22:50
  • @PDHide yes, the spinner just loads indefinitely when using cypress Mar 17, 2021 at 8:52
  • @pavelsaman sorry, what you mean by first place? I updated my question with the test runner result. I am trying to wait for the network request. So I did ``` cy.intercept('myURK/customer/*').as('getCompanies') ``` // I want wait the URL after customer cy.visit('myURL/customer/companies') ``` cy.wait('@getCompanies') ``` The test passed but the spinner is still spinning Mar 17, 2021 at 9:03

1 Answer 1

it('should wait spinner dissapears', function () {

could you try this instead ? cy.get() has a default timeout of 4 sec it also can be modified by passing the options



cy.get(path).invoke('attr', 'value').then($initialVal => {
    //It's better if you can do your click operation here

    //Wait untill the element changes
    cy.get(path).then($newVal => {
        cy.waitUntil(() => $newVal[0].value !== $initialVal, {
            //optional timeouts and error messages
            errorMsg: "was expeting some other Value but got : " + $initialVal,
            timeout: 10000, 
            interval: 500 
          }).then(() => {
            cy.log("Foudn a difference in values")

see this discussion : https://stackoverflow.com/questions/62897411/cypress-wait-until-wait-for-element-attribute-to-change

  • I did ``` cy.get('im-loader.hydrated',{"timeout":1200000}).shadow().find('im-spinner.hydrated').should('not.be.visible'); ``` but Cypress again timesout in 4secs. On my cypress.json I have {"pageLoadTimeout": 900000, "includeShadowDom": true, "modifyObstructiveCode":false, "responseTimeout": 120000, "chromeWebSecurity":false, "numTestKeptInMemory":0, "waitForAnimations": true } Mar 17, 2021 at 10:34
  • I removed the shadow as you suggested.Strangely, Cypress times out after 4000ms and not after 12000ms expecting im-spinner not to be visible. So I tried cy.get('im-loader.hydrated').find('im-spinner.hydrated',{"timeout":12000}).should('not.be.visible'). Then Cypress times out retrying after 12000ms expecting '<im-spinner.hydrated>' not to be 'visible' Mar 17, 2021 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.