web-dev-qa-db-fra.com

Comment puis-je attendre de manière fiable les demandes XHR après avoir chargé une page dans un test Cypress?

dans mon application, lorsque je visite une page, elle demande au réseau de récupérer des données et de les afficher sur la page. après cela, vous cliquez sur les boutons et remplissez les champs pour filtrer ces données.

j'ai un test de cyprès qui visitera essentiellement la page, appliquera des filtres et s'assurera que le contenu du dom semble correct:

it(`filters the data by 'price'`, () => {
  cy.server()
  cy.route('POST', 'http://my-api.biz/api').as('apiRequest')

  cy.visit('/')

  // initial page load loads the min and max price bounds for the UI,
  // as well as the data to initially populate the page. they happen
  // to hit the same URL with different POST params
  cy.wait(['@apiRequest', '@apiRequest'])

  cy.get('#price-filter-min').type('1000')
  cy.get('#price-filter-max').type('1400')

  // wait for data to get refreshed
  cy.wait('@apiRequest')

  cy
    .get('[data-test-column="price"]')
    .each($el => {
      const value = parseFloat($el.text())
      expect(value).to.be.gte(1000)
      expect(value).to.be.lte(1400)
    })
})

cependant, parfois, Cypress semble charger la page, faire les requêtes XHR avant en attente, puis sporadiquement, il échouera:

CypressError: Expiration du délai de nouvelle tentative: cy.wait () a expiré en attendant 30000 ms pour la 2e réponse à l'itinéraire: 'apiRequest'. Aucune réponse ne s'est jamais produite.

car il attend une demande qui a déjà eu lieu.

existe-t-il une meilleure façon d'écrire ce test? existe-t-il un moyen de visiter une page et d'attendre les demandes XHR qui évite cette condition de concurrence?

MISE À JOUR

j'ai essayé de recréer cela dans un cas de test isolé, mais tout semble fonctionner correctement, donc il y a probablement une erreur d'opérateur.

cypress
6
schpet

Vous pouvez faire quelque chose comme ça

// Give an alias to request
cy.server().route("GET", /odata/locations/**).as('dataGetFirst')

// Visit site
cy.visit('admin/locations')

// Wait for response.status to be 200
cy.wait('@dataGetFirst').its('status').should('be', 200) 

// Continue
7
Luis Marroquin