javascript - How to mock the image response in cypress - Stack Overflow

admin管理员组

文章数量:1289362

My problem

I'm trying to simulate a response from the server containing an image with cy.intercept however, the browser won't display my mocked image. The browser just can't interpret my response as a proper image for <img> tag.

I can still copy the response in debug tools and it seems to be the image I need but probably encoded in the wrong way.

My approach

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

I've also tried to return base64 image string like this:

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

But it didn't work as well.

My problem

I'm trying to simulate a response from the server containing an image with cy.intercept however, the browser won't display my mocked image. The browser just can't interpret my response as a proper image for <img> tag.

I can still copy the response in debug tools and it seems to be the image I need but probably encoded in the wrong way.

My approach

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

I've also tried to return base64 image string like this:

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

But it didn't work as well.

• javascript
• cypress

Share Improve this question Follow asked May 31, 2021 at 0:15 QbackQback 4,91833 gold badges2929 silver badges4343 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

This seems like a job for a fixture

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

By default, you would place your logo.png file into the cypress/fixtures directory however you can configure it to use another location

本文标签： javascriptHow to mock the image response in cypressStack Overflow