[FIXED] How to test File-Upload functionality?

Issue

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

Solution

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.

Answered By - RoboBear

Answer Checked By - Pedro (PHPFixing Volunteer)