如何在cypress中模拟图像响应

Question

我的问题

我正在尝试模拟来自包含图像的服务器的响应cy.intercept，但是浏览器不会显示我的模拟图像。浏览器无法将我的响应解释为<img>标签的正确图像。

我仍然可以在调试工具中复制响应，它似乎是我需要的图像，但可能以错误的方式编码。

我的方法

    cy.readFile('src/assets/logo.png', 'binary').then((imgContent) => {
      cy.intercept('/uploads/test.png', {
        headers: { 'Content-Type': 'image/jpg' },
        body: imgContent,
      })
    });

我还尝试返回 base64 图像字符串，如下所示：

    cy.intercept(
      '/uploads/test.png',
      {
        headers: {"Content-Type": "image/jpg"},
        body:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAARCUlEQVR4Xu1deXQURRr...

但效果并不好。

Answer 1

这似乎是固定装置的工作

cy.intercept("/uploads/test.png", { fixture: "logo.png" })

默认情况下，您会将logo.png文件放入该cypress/fixtures目录中，但是您可以将其配置为使用其他位置