No examples on how to validate XHR response (body, content-type and other)

Like in a title. I have found only this: https://github.com/cypress-io/cypress/issues/937

But there is only a short info:

cy.route('GET', '/login').as('getLogin')
cy.get('#contactID').type('[e-mail]')
cy.contains('Login').click()
cy.wait('@getLogin').then(function(xhr){
  // we can now access the low level xhr
  // that contains the request body,
  // response body, status, etc
})

How to access low level xhr? I would love to see some examples how to validate response body; for example: my response is:

[{
    "Key": 16176,
    "LineName": "Line A",
    "displayFullName": "A-0300/0350 801"
  },
  {
    "Key": 14567,
    "LineName": "Line B",
    "displayFullName": "C-876867"
  }
]

I know that one element name should be A-0300/0350 801, now I want to verify that and also I need to retrieve it’s Key.

[jennifer-shehane]

After accessing the array, it’s mostly a matter of doing some functional programming to assert on what you want. Some examples -

cy.wait('@getLogin').then(function(xhr){
  const response = xhr.responseBody
  expect(response[0]).to.have.property('LineName', 'Line A')
  
  const obj1Values = Cypress._.values(response[0])
  expect(obj1Values).to.deep.eq([16176, "Line A", "A-0300/0350 801"])
})

Hopefully this helps you get started!

[bahmutov]

you can find examples here https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/#api-testing which is linked from https://on.cypress.io/network-requests page. The Network Requests page could use a couple of examples right under https://on.cypress.io/network-requests#Assertions section