Skip to main content

Cypress File Upload

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.

cypress-file-upload

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):

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: http://www.autopract.com/

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'
 
       cy.visit('http://www.autopract.com/#/home/fashion')
       
        // Close poup which appear after visiting autopract
        cy.get('button.close').click()
        
        // Specify locator for choose file input and use attach file method
        cy.get('input[type="file"]').attachFile(f)
        // Click on Upload Button
        cy.get('.btn.btn-success').click()
    })
})

Output

cypress test file upload

Video Tutorial: Cypress File Upload Example

Tags
Submitted by arilio666 on May 10, 2022

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.