How to upload a file in Cypress?

We can upload a file in Cypress. To perform the file upload task in Cypress, we have to first install a plugin with the command −

npm ins tall –dev cypress-file-upload

Once the installation is done, we have to add the statement import 'cypress-fileupload' in the command.js file which resides inside the support folder within our Cypress project. Also, we shall add the file that we want to upload within the fixtures folder(Picture.png file).

To upload a file, we have to use the Cypress command, attachFile, and pass the path of the file to be uploaded as a parameter to it.

Example

Implementation

describe('Tutorialspoint Test', function () {    // test case    it('Test Case6', function (){       //file to be uploaded path in project folder       const p = 'Picture.png'       // launch URL       cy.visit("https://the-internet.herokuapp.com/upload")       //upload file with attachFile       cy.get('#file-upload').attachFile(p)       //click on upload       cy.get('#file-submit').click()       //verify uploaded file       cy.get('#uploaded-files').contains('Picture')    }); });

Execution Results

The execution logs show that the file Picture.png got uploaded and the file name got reflected on the page.