How to Use File Uploader With Cypress

In this article, we will discuss how we can upload a file in cypress.

Method i: Using the cypress-file-upload node packet. Let's automate the below Exam scenario:

1. Become to https://the-net.herokuapp.com/upload.
2. Select a file and upload information technology.
3. After upload, validate that the file was successfully uploaded.

Step 1: Install the cypress-file-upload node bundle using the command:

1	npm install --salvage-dev cypress-file-upload

One time you have installed the package successfully, you can see the package name in your package.json file

Stride 2: We will at present import the node package in to our cypress project. To import, write the below code in cypress > support > commands.js

i	import 'cypress-file-upload' ;

Step 3:

1 2 3 4 five 6 7 8 ix 10 eleven 12

describe( 'Instance to demonstrate file upload in cypress', role ( ) { before(part ( ) { cy.visit ( 'https://the-net.herokuapp.com/upload' ) } )     information technology( 'File Upload using cypress-file-upload npm packet', ( ) => { const filepath = 'images/evening.png' cy.get ( 'input[blazon="file"]' ).attachFile (filepath) cy.become ( '#file-submit' ).click ( ) cy.get ( '#uploaded-files' ).contains ( 'evening.png' ) } ) } )

1 2 iii

before(function ( ) { cy.visit ( 'https://the-internet.herokuapp.com/upload' ) } )

This volition open the webpage https://the-internet.herokuapp.com/upload before the execution of it blocks.

1 2 iii four 5 half-dozen

information technology( 'File Upload using cypress-file-upload npm package', ( ) => { const filepath = 'images/evening.png' cy.get ( 'input[blazon="file"]' ).attachFile (filepath) cy.get ( '#file-submit' ).click ( ) cy.go ( '#uploaded-files' ).contains ( 'evening.png' ) } )

Here we are uploading a file which is located at fixtures > images > evening.png.

In the filepath variable, we are storing the image path. Since cypress always searches for exam data from the fixtures folder so images/evening.png will work fine. cy.get('input[blazon="file"]').attachFile(filepath) volition add together the image file path in Choose file. cy.get('#file-submit').click() will click on the upload button. cy.go('#uploaded-files').contains('evening.png') will check the file name to validate successful upload.

Pace iv: After successful Test Execution:

Method 2: Using the in-built .selectFile() control. This was introduced with cypress 5 9.3.0.

a) File upload using the default 'select' fashion – By default, .selectFile() runs in 'select' manner, mimicking a user selecting ane or more files on an HTML5 input element. In this manner, the bailiwick must be a single input element with blazon="file", or a label element connected to an input (either with its for attribute or by containing the input).

ane ii 3 4 five six

it( 'File Upload using selectFile with select fashion' , ( ) => { cy.visit ( 'https://the-internet.herokuapp.com/upload' ) cy.get ( '#file-upload' ).selectFile ( 'cypress/fixtures/images/evening.png' ) cy.get ( '#file-submit' ).click ( ) cy.get ( '#uploaded-files' ).contains ( 'evening.png' ) } )

Here we are merely passing the location of the file to selectFile and then afterward upload, validating that the file upload was successful. One thing to remember is that the path of the file should exist from the projection root folder. In our case, the file is located under the 'images' folder inside the 'fixtures' folder, hence cypress/fixtures/images/evening.png was used.

b) File upload using 'drag-drop' mode – Setting the action to drag-drop changes the behavior of the control to instead mimic a user dragging files from the operating system into the browser, and dropping them over the selected subject field. In this way, the subject can be whatever DOM element or the document as a whole.

1 ii 3 4 5 vi

it( 'File Upload using selectFile with drag and drop mode' , ( ) => { cy.visit ( 'https://postimages.org/' ) cy.get ( '#uploadFile' ).selectFile ( 'cypress/fixtures/images/evening.png' , { action: 'drag-drop' } ) cy.get ( '.controls > h2' , { timeout: 7000 } ).should ( 'have.text' , 'Upload completed!' ) cy.go ( '.imagetitle' ).should ( 'have.text' , 'evening' ) } )

Here we are using the elevate and drop mode for file upload. This can be achieved past passing { activity: 'elevate-drop' } with selectFile. Afterwards upload, we are validating that the file was successfully uploaded.

c) Multiple file upload

1 ii three iv 5 6 7 8 9 10 11 12 xiii fourteen fifteen xvi 17 18

it( 'Multiple file upload using selectFile' , ( ) => { cy.visit ( 'https://postimages.org/' ) cy.get ( '#uploadFile' ).selectFile ( [ 'cypress/fixtures/images/morning.jpg' , 'cypress/fixtures/images/evening.png' , 'cypress/fixtures/images/dark.jpg' , ] , {action: 'elevate-driblet' } ) cy.get ( '.controls > h2' , {timeout: 9000 } ).should ( 'have.text' , 'Upload completed!' ) cy.go ( '.imagetitle' ).eq ( 0 ).should ( 'accept.text' , 'evening' ) cy.become ( '.imagetitle' ).eq ( i ).should ( 'have.text' , 'morning' ) cy.become ( '.imagetitle' ).eq ( 2 ).should ( 'have.text' , 'night' ) } )

Here instead of one file, nosotros are inputting multiple files at one time for upload. This is achieved past passing the file locations as an array to selectFile. Once the files are uploaded we are validating that the upload was successful.

In case you have been previously using the cypress-file-upload plugin and want to move to cypress native command selectFile(), you can check out this migration guide.

Do check out 🙂

Github: https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/

pricethemixer.blogspot.com

Source: https://testersdock.com/cypress-file-upload/

Share this post