Cypress File Upload

Profile picture for user arilio666

There is an option to upload files in cypress using an external plugin which needs to be installed before doing the upload operation.

Install Cypress-File-Upload Plugin

Type in the below command to install the file upload plugin in the command line.

npm install –dev cypress-file-upload

You will see below output once installation is successfully done.


Import Cypress-file-upload Plugin

Navigate to the support folder, open the commands.js file, and add the statement below.

import 'cypress-file-upload'

Then, make sure this commands.js is imported in cypress/support/index.js (it might be commented):

Note: if you are using version Cypress 10 or above add it to e2e.js. For typescript it will be e2e.ts.

import "./commands";

Upload file to Fixture Folder

Upload File to fixture folder. We have uploaded G.png. You can also create folder inside fixture folder and give path like foldername/imagename in your code.

cypress upload file

Cypress File Upload Example

Demo Link:

At the bottom of the page you will see below file upload input and button.

upload file cypressOnce you will upload file a link will be generated where you can view your file.

file upload in cypress

Code for File Upload

describe('Automate AutoPract',()=>
    it('Upload File',()=>{
        // File Name in Variiable
        const f = 'G.png'
        // Close poup which appear after visiting autopract
        // Specify locator for choose file input and use attach file method
        // Click on Upload Button


cypress test file upload