Cypress JS и возможность загрузки и добавления изображения
Итак, я работаю над загрузкой файла в 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)
})
})
Я думал использовать пакет загрузки кипариса, чтобы вытащить файл, назначить его в поле ввода и загрузить. Затем получите местоположение, создайте изображение, установите источник, в том числе в загруженном приборе. Затем добавьте его в местоположение (на основе имени класса).
я получаю
TypeError: location.appendChild is not a function
Есть ли способ добавить загруженное изображение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Метод document.getElementsByClassName возвращает вам массив элементов. Где appendChild — это метод элемента. Следовательно, вы получаете ошибку.
Чтобы решить эту проблему, есть 2 способа,
- Назначить идентификатор
Назначьте идентификатор вашему HTML-элементу, который сделает его уникальным, и получите этот элемент через документ.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. Получить элемент из массива
Если вы не хотите присваивать идентификатор, вы можете получить элемент из массива через индекс. Хотя в этом случае нужно быть уверенным, что HTML-тег с классом layout только один.
var image = document.createElement("img");
image.setAttribute("src", jack);
var location = document.getElementsByClassName("layout")[0];
location.appendChild(image);
Две проблемы с кодом:
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)
})
})
})