Question

所以我正在用赛普拉斯上载文件。现在，我遇到了将图像附加到页面的问题。我正在尝试在以下位置上传/添加图片：

<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上载包来提取文件，以将其分配给输入字段并上载。然后获取位置，创建img，设置源（包括已上传的灯具）。然后将其附加到该位置（基于类名）。

我最终得到

TypeError：location.appendChild不是函数

是否可以添加上传的图像？

Answer 1

代码有两个问题：

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

更正后的代码如下：

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

Answer 2

方法document.getElementsByClassName返回一个元素数组。其中appendChild是元素的方法。因此，您会收到错误消息。

要解决此问题，有两种方法，

分配ID

为您的HTML元素分配一个ID，以使其唯一，并通过document.getElementById获得该元素。之后，您可以将其他元素附加到该元素。

<label for="upload-137" class="field-upload>
 <div class="layout justify-center" id="layoutContainer">
  <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>

在您的JavaScript中：

var image = document.createElement("img");
image.setAttribute("src", jack);
var location = document.getElementById("layoutContainer");
location.appendChild(image);

2。从数组中获取元素

如果您不希望分配ID，则可以通过索引从数组中获取元素。尽管在这种情况下，您需要确保只有一个HTML标记具有类layout。

var image = document.createElement("img");
image.setAttribute("src", jack);
var location = document.getElementsByClassName("layout")[0];
location.appendChild(image);

赛普拉斯JS以及上传和添加图像的功能

2 个答案: