Я пытаюсь использовать cypress для написания тестов e2e для мультимедийного приложения, которое обрабатывает загрузку с помощью Vue Filepond, но у меня возникают проблемы с запуском загрузки файлов. Как я могу это сделать?
После долгих поисков я нашел этот фрагмент кода, опубликованный пользователем github DragoWW.
Cypress.Commands.add("uploadFile", (selector, fileUrl, type = "") => {
return cy.get(selector).then(subject => {
return cy
.fixture(fileUrl, "base64")
.then(Cypress.Blob.base64StringToBlob)
.then(blob => {
return cy.window().then(win => {
const el = subject[0];
const nameSegments = fileUrl.split("/");
const name = nameSegments[nameSegments.length - 1];
const testFile = new win.File([blob], name, { type });
const dataTransfer = new DataTransfer();
dataTransfer.items.add(testFile);
el.files = dataTransfer.files;
return cy.wrap(subject).trigger('change');
});
});
});
});
и это сделало свое дело. Поместив его поверх моего тестового файла, я мог просто написать
cy.uploadFile("input[type=file]", "some-audio-file.wav", "audio/wav")
и загрузка сработала.
Это вызвало у меня ошибку, потому что ввод покрывается
filepond--drop-label
, но изменение.trigger('change');
на.trigger('change', { force: true });
исправило это (если у кого-то еще есть эта проблема).