У меня есть приложение, использующее p-fileUpload, для которого я пишу тест Cypress.
Я подумал, что, возможно, я мог бы сделать это, используя метод selectFile, но это не сработало.
Вот моя реализация p-fileUpload в html:
<p-fileUpload
name = "files"
[url] = "url"
accept = "text/xml"
[multiple] = "true"
(onBeforeUpload) = "onBeforeUpload($event)"
(onUpload) = "onUpload($event.files, $event.originalEvent.body)"
(onError) = "onError($event.files, $event.originalEvent ? $event.originalEvent.body : $event.error)"
[attr.data-cy] = "'fileUpload'"
></p-fileUpload>
А вот моя попытка загрузить файл в моем тесте Cypress:
cy.get('[data-cy = "fileUpload"]').should('be.visible')
.then($upload => {
cy.get('[data-cy = "fileUpload"]').selectFile('cypress/fixtures/myfile.xlsx');
});
и вот ошибка, которую я получаю:
cy.selectFile() can only be called on an <input type = "file"> or a <label for = "fileInput"> pointing to or containing a file input, but received the element:
<p-fileupload _ngcontent-dan-c234 = "" name = "files" accept = "text/xml" class = "p-element" ng-reflect-name = "files" ng-reflect-accept = "text/xml" ng-reflect-url = "transaction/api/v2/upload/xml?" ng-reflect-multiple = "true" data-cy = "fileUpload">...</p-fileupload>
Какие-либо предложения?
Большое спасибо.
Попробуйте вариант drag-drop
.
cy.get('[data-cy = "fileUpload"]')
.selectFile('cypress/fixtures/myfile.xlsx', {action: 'drag-drop'})
Когда вы используете эту опцию, Cypress ищет в дочерних элементах <p-fileUpload>
<input>
, к которому он прикрепит файл.
Проверив HTML на вкладке dev-tools/Elements, вы сможете найти, например, <input>
под основным элементом (опуская некоторые атрибуты).
<p-fileupload>
<div class = "p-fileupload">
<div class = " p-fileupload-buttonbar">
<span class = "p-button">
<input type = "file" />