Search⌘ K
AI Features
Home
Courses
Front-end Testing 101: Integration and End-to-end Testing

Asserting on Payloads

Explore how to perform detailed assertions on AJAX request and response payloads in front-end testing using Cypress. Understand how to validate user data, tokens, and response status to prevent app errors and improve test reliability.

We'll cover the following...

Ajax payload

Before summarizing all the improvements we made to the original test, we need to discuss AJAX payloads assertions. The original list of problems listed two possible errors related to payloads

  • The AJAX call has the wrong request payload

  • The API returns the wrong payload

Both of these errors could break the app without any meaningful feedback. Cypress provides us APIs to check them.

First of all, the request payload looks like this:

{
  "user": {
    "username": "Tester92306",
    "email": "user+92306@realworld.io",
    "password": "mysupersecretpassword"
  }
}

The response payload looks like the following:

{
  "user": {
    "username": "tester92306",
    "email": "user+92306@realworld.io",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNzA5NmY3MWM2YTQ5MDVjM2VhMGM3NSIsInVzZXJuYW1lIjoidGVzdGVyOTIzMDYiLCJleHAiOjE1NzI4NDczNjcsImlhdCI6MTU2NzY1OTc2N30.uT9qGkT4FPCHwkV2A_7rbRFb_YqJN3cyncdbKOC3xNY"
  }
}

We note that:

  • The username property is the same but it is converted to lowercase in the request payload.

  • The email is the same.

  • The token is a string that ...