Можете ли вы заставить тест Cypress выполнить загрузку файла для p-fileUpload?

У меня есть приложение, использующее 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>

Какие-либо предложения?

Большое спасибо.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
80
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте вариант 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" />

Другие вопросы по теме