Cypress, Vue и возможность сделать загрузку файла

Question

Итак, я пытаюсь выполнить тест загрузки файлов с помощью Cypress в приложении Vue. По какой-то причине разработчик FE использовал метку / ввод вместо компонента кнопки. Таким образом, HTML-код выглядит примерно так:

<label for="upload-137" class="field-upload>
 <div class="layout justify-center">
  <span class="v-btn">
   <div class="v-btn__content">
    <i class="v-icon">add</i>
   </div>
  </span>
 </div>
 <input id="upload-137" name="upload" type="file" accept=".jpg,.jpeg,.png" class="file-input">
</label>

Таким образом, я могу получить элемент с кипарисом со следующим:

cy.get('form').within(()=>{
 cy.get('label > .layout')
   .find('span')
   .click()
})

Никаких ошибок не происходит, и он щелкает элемент. Однако ... не отображается подсказка для загрузки файла.

Поэтому я решил просто обойти и ввести файл на вход. Поэтому я добавил в свой файл интеграции следующее:

const fileName = "/folder/file.jpg";
const fileType = "image/jpg";
const selector = 'input[name="upload"]';
cy.upload_file(fileName, fileType, selector);

Тогда в моем файле команд:

Cypress.Commands.add('upload_file', (fileName, fileType, selector) => {
  cy.get(selector).then(subject => {
    cy.fixture(fileName, 'hex').then((fileHex) => {

      const fileBytes = hexStringToByte(fileHex);
      const testFile = new File([fileBytes], fileName, {
        type: fileType
      });
      const dataTransfer = new DataTransfer()
      const el = subject[0]

      dataTransfer.items.add(testFile)
      el.files = dataTransfer.files
    })
  })
})
function hexStringToByte(str) {
  if (!str) {
    return new Uint8Array();
  }

  var a = [];
  for (var i = 0, len = str.length; i < len; i += 2) {
    a.push(parseInt(str.substr(i, 2), 16));
  }

  return new Uint8Array(a);
}

Нет ошибок отображения. Нет изображения.

Поэтому я стараюсь вместо:

  cy.fixture('driver/jack.jpg').as('jack')
  cy.get('input[type=file]').then($input => {
    return Cypress.Blob.base64StringToBlob(this.jack,
      'image/jpg').then(
      blob => {
        const imageFile = new File([blob], 'jack.jpg', {
          type: 'image/jpg'
        })
        const dataTransfer = new DataTransfer()
        dataTransfer.items.add(imageFile)
        $input[0].files = dataTransfer.files
      }
    )
  })

Та же проблема. Нет ошибок, но изображение не отображается. Я знаю, что после загрузки изображения понадобятся дополнительные поля и наличие файла обязательно.

Поскольку это не удалось, я попытался загрузить документацию с Cypress. Это однако дает ошибку:

return Cypress.Blob.base64StringToBlob(this.logo, 'image/png')
 .then((blob) => {
   $input.fileupload('add', { files: blob })
 })

С этим я на самом деле получаю

$ input.fileupload не является функцией

Если я попытаюсь:

  cy.fixture('driver/jack.jpg').as('jack')
  cy.get('input[type=file]').then($input => {
    return Cypress.Blob.imgSrcToDataURL('jack').then((dataUrl) => {
      const img = Cypress.$('<img />', {
        src: dataUrl,
        crossorigin:"anonymous"
      })
      cy.get('.field-upload > .layout').then(($div) => {
        // append the image
        $div.append(img)
      })
      cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl)
    })
  })

Тогда я получаю

Ошибка: событие {"isTrusted": true} было сгенерировано, выдается ошибка:)

Я знаю, что при ручном тестировании в Firefox после нажатия на значок, чтобы добавить изображение, открывается приглашение ввести файл, а затем, нажав «Сохранить», HTML-код добавляется к изображению, расположенному после интервала, как брат.

Так как мне загрузить изображение в Cypress для приложения Vue?