CODEWITHSUNDEEP
cypress
user8710571
user8710571

Reputation: 455

Cypress:Is there any way to check invisibility of an element

In our application when user do some actions that require communicatiion with server -a loading bar will be displayed on top panel.Once the action completed-Loading bar will be disappeared.In tests we are using this as a check before we move to next step. In selenium i am checking the disappearance of loading bar as shown below 

WebDriverLongWait.Until(ExpectedConditions.InvisibilityOfElementLocated(By.Id("loading-bar")));

Is there a similar way to check invisibility of an element in Cypress

instead of waiting for loading bar i am waiting for the request to finish

as shown below cy.server()
            cy.route('POST','**/saveExpression').as('saveExpression')
            cy.get('.IEE-save-button',{ timeout: 100000 }).contains('Apply Expression').click();

            cy.wait('@saveExpression').then((xhr)=>

            {
                cy.contains('browse',{timeout: 60000}).click()
            })

Upvotes: 1

Views: 1344

Answers (1)

Kondasamy Jayaraman
Kondasamy Jayaraman

Reputation: 1864

In this scenario, it's ideal to use .should('not.be.visible'). To place in your example as below,

cy.get('#loading-bar').should('not.be.visible')

Since loading bar indicator is dependent on some network request, you can wait for the XHR request to finish before making an assertion. You could use the wait() function of cypress. For instance:

// Wait for the route aliased as 'getAccount' to respond
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  cy.get('#loading-bar').should('not.be.visible')
})

Upvotes: 2

Related Questions