所以我正在努力在 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
有没有办法附加已上传的图片?
最佳答案
代码的两个问题:
-
测试代码中的
document
将引用用于运行测试的document
,您实际上想使用cy.document()
获取被测应用程序(AUT)的文档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)
})
})
})
关于javascript - Cypress JS 以及上传和附加图像的能力,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56363462/