I am getting a API response as an image, currently i need 2 things.

1. On postman i am validating the response in Tests as below .

   pm.test("Content-Type is present", function () { pm.response.to.have.header("Content-Type","image/png"); });

I want to know how the header response be validated in Cypress code after i have the response.

2. In postman i can see the response body having a image, but when i run in Cypress all i see the validation like status code,so is there a way that the image can be rendered in browser ? and more validations can be done ?

I am getting a API response as an image, currently i need 2 things.

1. On postman i am validating the response in Tests as below .

   pm.test("Content-Type is present", function () { pm.response.to.have.header("Content-Type","image/png"); });

I want to know how the header response be validated in Cypress code after i have the response.

2. In postman i can see the response body having a image, but when i run in Cypress all i see the validation like status code,so is there a way that the image can be rendered in browser ? and more validations can be done ?

• javascript
• postman
• cypress

• For point2 I would need to see your response body. – Alapan Das Commented Sep 3, 2021 at 6:59
• 1 The response body is just an image, and I was able to render it on browser by using encoding. I was also able to download it for paring the images for further validation. – Abdulla Suhail Commented Sep 6, 2021 at 6:25

2 Answers 2

An example is given here Get Data URL of an image, but the image url is out of date - I substituted the one from Cypress Github page.

Key is to add encoding to the request

cy.request({
  url: 'https://cloud.githubusercontent./assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png',
  encoding: 'base64',
}).then((response) => {

  // test any response properties here

  const base64Content = response.body
  const mime = response.headers['content-type'] // or 'image/png'
  expect(mime).to.eq('image/png')

  // see https://developer.mozilla/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
  const imageDataUrl = `data:${mime};base64,${base64Content}`
  return imageDataUrl
})
.then((imageDataUrl) => {

  // display the image in Cypress test runner

  cy.window().its('document.body')
  .then($body => {
    $body[0].innerHTML = `<img src="${imageDataUrl}"  height="100" width="300" />`
  })
})

You can use cy.request to validate the response headers -

cy.request('GET', 'https://jsonplaceholder.cypress.io/ments').then((response) => {
  expect(response.headers).to.have.property('Content-Type', 'image/png') //assert Request header
})