Cypress Uploading-CodePudding

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

i tried to upload the csv file and click on convert it, At cypress test result it shows that the file have been uploaded but actually its not. enter image description here

CodePudding user response：

I hope you're using cypress-file-upload. Your file seems to be in the integration folder. I would suggest putting all the files required for Cypress tests inside cypress/fixtures folder and calling them as fixtures.

CodePudding user response：

I would also higly suggest to use cypress-file-upload.

With it you can do it like that:

First, you get your input field for the file. Then you can use .attachFile to declare the source and give it a name

cy.get('.FileInput input[type=file]')
 .attachFile({filePath: 'Example.csv', fileName});

CodePudding user response：

There are a couple of events attached to the input that need to be fired after you attach the file.

The user will click the "Choose file" and the OS opens a file selection dialog. Since Cypress can't control that dialog, you are effective replacing that step with .attachFile(...).

As soon as the file is attached, the upload begins automatically and when complete, the file name appears in the file list element.

The element we need to attach to is <input id="fileUploadInput" type="file">.

If you inspect this element, and look at it's event listeners there's a change event and a custom event fileuploadsubmit that look useful

This is the code that works for me

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