How to upload file in cypress test? once we select file in file open explorer then DOM directly uploading the file

Question

There is a button in UI, it will open file open explorer, once we select file and click open, then DOM directly uploading the file,

Upload Document Pop Up

selecting the file and click open

file directly getting uploaded

tried all possible ways suggested in cypress-file-upload package. not working, background there is an API POST request which is actually uploading the file, but that API URL is dynamic(URL includes the user authentication login token, and upload key, and user id), so it is not possible to generate/recreate the upload API URL

Can't able to access the file open explorer? In this scenario, how to perform file upload using CyPress?

Answer 1

You should be able to use a RegEx in the RouteMatcher for the intercept on the Upload API. If you need help creating your Regex, I suggest using Regex101 as a scratch pad. Slightly modified from the cypress-file-upload documentation:

// intercept the API endpoint
cy.intercept({
  method: 'POST',
  url: /.*my-api.com.*/
}).as('upload');


const fileName = 'upload_1.xlsx';

cy.fixture(fileName, 'binary')
    .then(Cypress.Blob.binaryStringToBlob)
    .then(fileContent => {
      cy.get('#input_upload_file').attachFile({
        fileContent,
        fileName,
        mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        encoding:'utf8',
        lastModified: new Date().getTime()
      })
    })

// wait for the 'my-api.com' request, and leave a 2 minutes delay before throwing an error
cy.wait('@upload', { requestTimeout: 120000 });