Блог

У меня есть приложение react, которому требуется URL-адрес изображения в качестве ввода текста, затем после отправки URL-адреса изображение с URL-адреса отображается в <img> параметре, установив его атрибут src.

Я пишу тест в Cypress, и я хочу либо заглушить этот запрос, чтобы вернуть изображение приспособления, либо просто отобразить мое изображение приспособления на странице, прикрепив его к элементу. Что я пробовал:

• Использовал route2, чтобы заглушить этот запрос изображения и вернуть мое изображение приспособления в качестве ответа, но это поместило cypress runner в бесконечный цикл, бесконечно вызывая URL-адрес изображения: В документации route2 говорится, что он способен перехватывать загрузку ресурсов, так должно ли это быть возможно как-то с этим?

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

• Использовал пакет ‘cypress-file-upload’, чтобы прикрепить файл изображения приспособления в виде большого двоичного объекта к элементу img (пришлось заменить специальные символы, потому base64StringToBlob что ошибка «Не удалось выполнить»atob» в «Window»: строка, подлежащая декодированию, неправильно закодирована»).

   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'});
  });
    

Что я делаю не так? Как это можно сделать?
Спасибо!

Исправление проблемы с заглушкой было выпущено в https://github.com/cypress-io/cypress/releases/tag/v5.5.0