Comment capturer le trafic réseau du navigateur (XHR) avec Cypress

Cypress est un outil de test frontal de nouvelle génération conçu pour le Web moderne. Cypress a beaucoup de fonctionnalités intéressantes pour faciliter l'automatisation du navigateur.

L'une de ces fonctionnalités est la capacité de capturer le trafic réseau. Cet article donne un exemple de la façon de capturer le trafic réseau XHR lors de la soumission d'un formulaire.

Capturez le trafic réseau (XHR) avec Cypress

describe('Capture browser network traffic', function () { context('Login functionality', () => {
it('Dscro should be able to login', () => {
cy.server()
//This is the post call we are interested in capturing
cy.route('POST', 'https://loginservice.example.net/login/json/authenticate').as('login')
cy.visit('https://example.net/login')
cy.get('#email').type('tester@gmail.com')
cy.get('#password').type('Passw0rd1')
cy.get('button[type=submit]').click()
cy.wait('@login')
//Assert on XHR
cy.get('@login').then(function (xhr) {
expect(xhr.status).to.eq(200)
expect(xhr.requestHeaders).to.have.property('Content-Type')
expect(xhr.requestHeaders).to.have.property('X-Password', 'Passw0rd1')
expect(xhr.method).to.eq('POST')
expect(xhr.responseBody).to.have.property('tokenId')
})
}) }) })

En savoir plus sur Cypress Cyprès