verify loading indicator shows with cypress

问题

I have the following spec:

context('Contact update', () => {
  it.only('Can update contact', () => {
    const address = 'new address 123'
    const cardId = 'c2card-38AF429999C93B5DC844D86381734E62'
    cy.viewport('macbook-15')
    cy.authVisit('/contact/list')
    cy.getByTestId('open-doc-Aaron Dolney-0').click()
    cy.get('[name="physicaladdress"').type(`{selectall}{backspace}${address}`)
    cy.getByTestId(cardId, 'save-button').click()
    cy.getByTestId(cardId, 'loading')
    cy.get('[name="physicaladdress"').should('have.value', address)
  })
})

getByTestId is a command I wrote to reduce some boilerplate:

Cypress.Commands.add('getByTestId', (...ids) => {
  const id = ids.map(id => `[data-testid="${id}"]`).join(' ')
  return cy.get(id)
})

When I run this with anything other than cypress open, it fails on getting the loading indicator. I'm thinking my test endpoint is responding too fast and toggling the loading indicator too quickly.

Is there a better, more consistent, way to verify the loading indicator shows?

回答1:

I was struggling with this as well since I wanted to make sure the loading indicator was showing so I had to get a bit crafty. I found that cy.route() has an onRequest option and that ended up being just what I needed.

https://docs.cypress.io/api/commands/route.html#Options

    cy.server();
    // Verify that the loading indicator is shown before the request finishes
    cy.route({
      url: url_of_request_that_triggers_loading,
      onRequest: () => {
        cy.getByTestId(cardId, 'loading');
      },
    });

With this implementation we run the loading expectation before the request finishes and before the loading indicator disappears.

来源：https://stackoverflow.com/questions/51737844/verify-loading-indicator-shows-with-cypress

标签

cypress