24.3.2021 |

Cypress & Network Stubbing

Mithilfe von Cypress testen wir die Erfüllung von User Stories. Manchmal testen wir dabei konkret, ob bestimmte Calls wie erwartet durchlaufen. Wir können aber auch Antworten abfangen, verändern oder komplett simulieren. So können wir z.B. Fehlerfälle durchlaufen und prüfen, ob die UI wie gewünscht reagiert.

Zuvor: cy.server & cy.route

cy.server()
   .route({ method: 'GET', url: 'api/crm/*' }).as('excelDownload')
   [...]
   .get('button[type="submit"]').should('be.visible').click()
   .wait('@excelDownload').its('url').should('include', 'api/crm/excel?tool=CORNSEED&tenant=de')
   .get('@excelDownload').its('status').should('equal', 200);

Jetzt: cy.intercept

cy
   .intercept('GET', 'api/crm/*').as('excelDownload')
   [...]
cy.intercept(url, routeHandler?)
cy.intercept(method, url, routeHandler?)
cy.intercept(routeMatcher, routeHandler?)

Keine Methode gegeben? Dann hören wir auf alles. Der RouteMatcher sorgt für mehr Flexibilität: Vielleicht wollen wir ja nach bestimmten Headern oder Auth Credentials filtern.


Es werden mehrere Calls mit selber Methode + Endpunkt erwartet? Die Prüfung könnte so aussehen:

cy.get('@excelDownload.all').should('have.length', 2)
   .then((xhrs) => {
     // xhrs as array of network call objects
     expect(xhrs[0], 'first request status').to.have.property('status', 201)
     expect(xhrs[1], 'second request status').to.have.property('status', 201)
   })

Oder lieber einzeln prüfen? Dann so:

cy.get('@excelDownload.1').should((xhr1) => {
    expect(xhr1, 'first request').to.have.property('status', 201)
  })
  .get('@excelDownload.2').its('response.status').should('equal', 500)

Wir brauchen für den Testfall andere Beispieldaten?

Calls an den gegebenen Endpunkt können eine vordefinierte Antwort erhalten. Statische Objekte oder strings (z.B. 'success') können als Body mitgegeben werden. Oder ein Fixture:

cy.intercept('/users.json', { fixture: 'testUsers' })

Mehr in der Cypress Dokumentation📖

Zur Übersicht
Kerstin Paduch

Mehr vom Devsquad...

Lucas Meurer

TypeScript static inheritance Quiz

Adrian Görisch

Clean Code: 6 Lessons from Uncle Bob

Hallo

Wir sind für Sie da und freuen uns auf Ihre Fragen oder Ihr Feedback.

* Pflichtfeld