To perform the file upload task in Cypress, we have to first install a plugin with the command mentioned below −
npm install –dev cypress-file-upload
The following screen will appear on your computer −
Once the installation is done, we have to add the statement import ‘cypress-file-upload’ in the command.js file. This file 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). The following screen will be displayed −
To upload a file, we have to use the Cypress command, attach the file and pass the path of the file to be uploaded as a parameter to it.
Implementation
The implementation of the commands for uploading a file in Cypress is as follows −
describe('Adglob 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')
});
});
The execution logs show that the file Picture.png got uploaded and the file name got reflected on the page.