How to test video file upload in cypress?

Question

This forum has been really useful since I am new to automation and Cypress. I am also facing a problem while trying to upload file to application.

I used the below code in command.js:

Cypress.Commands.add('uploadFile', { prevSubject: true }, (subject, fileName, fileType = '') => {
    cy.fixture(fileName,'binary').then(content => {
      return Cypress.Blob.binaryStringToBlob(content, fileType).then(blob => {
        const el = subject[0];
        const testFile = new File([blob], fileName, {type: fileType});
        const dataTransfer = new DataTransfer();

        dataTransfer.items.add(testFile);
        el.files = dataTransfer.files;
        cy.wrap(subject).trigger('change', { force: true });
      });
    });
  });

And then below code in test:

const fileName = 'comp-test-malte.mp4';
const fileType = 'video/mp4';
cy.get('input[type=file]').uploadFile(fileName, fileType);

This is working half way for me as it shows uploading 0%, but getting the below error from the database and the file is not uploaded:

"Firebase Storage: Invalid argument in put at index 0: Expected Blob or File."

Kindly help!!

Answer 1

Currently, it seems Cypress.io doesn't support this feature, according to these sources:

Source 1

Source 2

Source 3

You could use a cypress-file-upload npm package as a workaround though!

In this thread comment you might find a proper workaround for it like so:

// sample code found in the thread
.fixture('bear.mp4', 'binary')
  .then(Cypress.Blob.binaryStringToBlob)
  .then(fileContent => {
    cy.get('#upload-video').upload({
      fileContent,
      fileName: 'bear.mp4',
      mimeType: 'video/mp4',
      encoding: 'utf8'
    })
})

For more details, check this repository.

Answer 2

You can use cypress-upload-file library to help you.

First install the dependence using terminal in the directory of your project:

npm install --save-dev cypress-upload-file

And then do:

    describe("Upload the file", () => {
  it("Upload the file and assert the name of the file uploaded", () => {
    cy.visit("https://your-url.example");

    const fileName = "bear.mp4";
    const fileType = "video/mp4";
    const selector = "#upload-video;

    uploadFile(selector, fileName, fileType);
  });
});

Hope this works for you! Best regards.