Cypress如何校验HTTP响应头及渲染接口返回的图片

1. 响应头Content-Type校验逻辑实现 #

你可以通过cy.request发起接口请求后直接对响应头字段做断言，和Postman的校验逻辑等效，示例代码如下：

it('校验响应头Content-Type为image/png', () => {
  cy.request('GET', '替换为你的实际图片接口地址')
    .its('headers.content-type')
    .should('eq', 'image/png')
})

注意：Cypress获取响应头时字段名统一为小写格式，不要使用首字母大写的Content-Type作为key取值，避免断言失败。

2. 浏览器中渲染接口返回图片的实现方法 #

可以将接口返回的二进制图片内容转成Base64格式，插入到Cypress的测试运行页面中即可渲染展示，同时支持拓展各类图片校验逻辑，示例代码如下：

it('渲染返回图片并执行拓展校验', () => {
  cy.request({
    method: 'GET',
    url: '替换为你的实际图片接口地址',
    encoding: 'base64' // 指定返回内容按Base64编码处理
  }).then((response) => {
    // 拼接图片Data URL
    const imageDataUrl = `data:image/png;base64,${response.body}`
    // 往测试页面插入图片元素完成渲染
    cy.document().then(doc => {
      const imgElement = doc.createElement('img')
      imgElement.src = imageDataUrl
      doc.body.appendChild(imgElement)
    })

    // 拓展校验示例：校验图片正常加载、宽高符合预期
    cy.get('img')
      .should('be.visible')
      .and($img => {
        expect($img[0].naturalWidth).to.equal(预期宽度数值)
        expect($img[0].naturalHeight).to.equal(预期高度数值)
      })
  })
})

运行测试后你可以直接在Cypress的预览窗口看到渲染完成的图片，也可以基于此实现像素比对、内容识别等更复杂的校验操作。

内容的提问来源于stack exchange，提问作者Abdulla Suhail