如何将夹具图像添加到赛普拉斯中的元素？

Question

I have a react application that requires the URL of an image as text input, then after submitting the URL, the image from the URL gets displayed in an <img> by setting it's src attribute.

I'm writing a test in Cypress and I want to either stub this request to return the fixture image or just display my fixture image on the page by attaching it to an element. What I tried:

• Used route2 to stub this image request and return my fixture image as a response, but it put the cypress runner in an infinite loop by calling the url of the image endessly: The documentation of route2 say it's able to intercept resource loads, so should it be possible somehow with this?

   cy.route2('GET', '**/kids.jpg', { statusCode: 200, fixture: `${FIXTURES_APP_PATH}kids.jpg` })

• Used the 'cypress-file-upload' package to attach the fixture image file as a blob to the img element (had to replace special chars because the base64StringToBlob threw an 'Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded' error).

   cy.fixture(`${FIXTURES_APP_PATH}kids.jpg`, 'base64').then(fixture => { Cypress.Blob.base64StringToBlob(fixture.replace(/^[^,]+,/, ''), 'image/jpg') }).then((fileContent: Blob) => { cy.get(AppPage.INPUT_IMG).attachFile({filePath: `${FIXTURES_APP_PATH}kids.jpg`, fileContent, mimeType: 'image/jpg'}); });

What am I doing wrong? How could this be done? Thanks!

Answer 1

A fix for the stubbing issue was released in https://github.com/cypress-io/cypress/releases/tag/v5.5.0