Question

因此，我试图在Vue应用程序中使用Cypress进行文件上传测试。由于某些原因，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>

所以我可以通过以下方式使用cypress来获取元素：

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

相同的问题。没有错误，但没有图像显示。我知道上传图像后，将需要其他字段，并且文件必须存在。

由于失败，我尝试了赛普拉斯的文件上传文档。但是，这会产生错误：

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后面附加一个位于跨度之后的图像作为同级。

那么，如何在赛普拉斯中为Vue应用程序上传图像？

赛普拉斯，Vue以及文件上传功能

0 个答案: