4

I am currently in a deep dive into Cypress and writing e2e tests for an application. I seem to have hit a road block when it comes to testing file upload functionality. Due to my beginner status as a QA engineer and the lack of Internet traffic on this specific issue I have reached and impasse. I came across Cypres.Blob in the Docs. Unfortunately there is not a lot of documented and I haven't been able to apply the examples to what I need to learn.

describe ('File Upload Test', () => {
    it('should upload a file', () => {
        let testfile = cy.fixture('../fixtures/cypresstest.txt')
        cy.get('input[type=file]').then(($input) => {
        return Cypress.Blob.base64StringToBlob(testfile, 'file/txt')
            .then((blob) => {
            $input.fileupload('add', { files: blob })
            })
        })
    })
});
3
  • Can you post an example of the code you have already tried? Then we can try to edit it to make it work.
    – codemon
    Feb 26, 2019 at 18:36
  • 1
    Check out this repo cypress-upload-file-post-form and related issue#170 then come back with a more specific question if you have a different use-case. Feb 26, 2019 at 19:04
  • I added a code snippet that must not have loaded earlier Feb 26, 2019 at 20:58

2 Answers 2

7

I'm testing our file upload service like this:

Cypress.Commands.add('uploadFile', (fileNamePath, fileName, fileType = ' ', selector) => {
  cy.get(selector).then((subject) => {
    cy.fixture(fileNamePath, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .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
      })
  })
})

Then in spec file. click upload button and wait for the file to load up:

cy.server().route('POST', api-upload-url).as('loadUp')
        cy.uploadFile('./pathToFile/' + fileName, fileName, fileType, fileInput);
        cy.get('.btn-upload.mat-raised-button.mat-primary').click()
        cy.wait('@loadUp').then((response) => {
            expect(response.method).to.eq('POST')
            expect(response.status).to.eq(200)
            expect(response.response.body.status).to.eq('OK')
        })

There's also a check for desired responses.

It's not super fancy and optimized. But it works in 3.1.5 and 3.2.0. It works using the electron 59 both headed and headless

3

I had this issue recently in a Laravel + React project, and I found an NPM module that's very useful for handling this called cypress-file-upload.

USAGE

  1. NPM install cypress-file-upload
  2. Import in /support/commands.js: import 'cypress-file-upload';
  3. Read cypress-file-upload Recipes for using plugin to test file uploads:

Hope this helps someone else! Many thanks to that module's author for his work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.