#testing #automated-tests #cypress
Вопрос:
describe ('Upload Test' , function(){
it('Upload Test' , function(){
cy.visit('https://document.online-convert.com/convert/csv-to-excel')
cy.get('#fileUploadButton').click()
const catalogue ='../integration/Example.csv';
cy.get('#file').attachFile(catalogue);
cy.get('#multifile-submit-button-main').click()
})
})
я попытался загрузить файл csv и нажать на его преобразование, в результате теста cypress показано, что файл был загружен, но на самом деле это не так.
введите описание изображения здесь
Ответ №1:
Я надеюсь, что вы используете cypress-file-upload . Похоже, ваш файл находится в папке интеграции. Я бы предложил поместить все файлы, необходимые для тестов Cypress, в папку cypress / fixtures и называть их fixtures .
Ответ №2:
Я бы также настоятельно рекомендовал использовать cypress-file-upload .
С его помощью вы можете сделать это так:
Сначала вы получаете поле ввода для файла. Затем вы можете использовать .attachFile для объявления источника и присвоения ему имени
cy.get('.FileInput input[type=file]')
.attachFile({filePath: 'Example.csv', fileName});
Ответ №3:
К входным данным прикреплено несколько событий, которые необходимо запустить после того, как вы прикрепите файл.
Пользователь нажимает «Выбрать файл», и ОС открывает диалоговое окно выбора файла. Поскольку Cypress не может управлять этим диалогом, вы эффективно заменяете этот шаг на .attachFile(...)
.
Как только файл прикреплен, загрузка начинается автоматически, и по завершении имя файла отображается в элементе списка файлов.
Элемент, к которому нам нужно подключиться, — это <input id="fileUploadInput" type="file">
.
Если вы проверите этот элемент и посмотрите на его прослушиватели событий, есть change
событие и пользовательское событие fileuploadsubmit
, которые выглядят полезными
Это код, который работает для меня
const catalogue = "../fixtures/example.csv";
cy.get('#fileUploadInput')
.attachFile(catalogue)
// this just confirms the internal file property of the element
// i.e confirm the attachFile worked
// You can leave it out, it does not affect the process
cy.get('#fileUploadInput')
.its('0.files')
.its('0')
.its('name')
.should('eq', 'example.csv')
// Now trigger the change event
cy.get('#fileUploadInput')
.trigger('change', {force:true}) // force because the input is hidden
// And the fileuploadsubmit event
// Note that after change event, the input is detached from DOM
// so we need to re-query for the id
cy.get('#fileUploadInput')
.trigger('fileuploadsubmit', {force:true})
// Confirm the file is in the file list
// if it's a large file, allow enough time with a timeout option
cy.contains('span', 'example.csv', {timeout: 10000})
// Now start the conversion
cy.get('#multifile-submit-button-main').click()