javascript - Cypress JS 以及上传和附加图像的能力

Question

所以我正在努力在 Cypress 中上传文件。现在我遇到了将图像附加到页面的问题。我正在尝试上传/附加以下图片:

<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.fixture('/driver/jack.jpg', 'base64').then(fileContent => {
    const jack = cy.get('input[type="file"]').upload({
      fileContent,
      fileName: 'jack.jpg',
      mimeType: 'image/jpg'
    }, {
      subjectType: 'input'
    }, );
    cy.get('.field-upload > .layout').then(($div) => {
      function words(){
        var image = document.createElement("img");
        image.setAttribute("src", jack);
        var location = document.getElementsByClassName("layout");
        location.appendChild(image);
      }
      $div.append(words)
    })
  })

我的想法是使用 cypress upload package 来拉入文件以将其分配给输入字段并上传。然后获取位置，创建 img，设置源，包括在已上传的灯具中。然后将其附加到位置(基于类名)。

我最终得到了

TypeError: location.appendChild is not a function

有没有办法附加已上传的图片？

Answer 1

代码的两个问题:

测试代码中的
1. document 将引用用于运行测试的 document，您实际上想使用 cy.document()获取被测应用程序(AUT)的文档
2. document.getElementsByClassName 返回一个 HTMLElement 数组，因此您需要从该数组中获取第一个元素才能使用它。

修改后的代码如下所示:

cy.fixture('/driver/jack.jpg', 'base64').then(fileContent => {
  cy.get('input[type="file"]').upload({
    fileContent,
    fileName: 'jack.jpg',
    mimeType: 'image/jpg'
  }, {
    subjectType: 'input'
  }, );

  cy.document().then($document => {
    cy.get('.field-upload > .layout').then(($div) => {
      function words(){
        var image = $document.createElement("img");
        image.setAttribute("src", "path/to/jack.jpg");
        return image
      }
      $div.append(words)
    })
  })
})