Загрузка Cypress

#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()