File Upload using Cypress.io

Modern Javascript frameworks present an organized way to write test scripts. When introducing Cypress.io in 2017, people might not think this will be a hot trending tool in upcoming years and with the easier onboarding than Selenium, made people move to Cypress.

Today I’m going to introduce the File Uploading mechanism for your test scripts. Many had problems with uploading files using Cypress. If you’re a person who wants to know this process, hope you will find a solution with this article.

Let’s Unpack!!!!

Introduction to File Upload

Even though this a trending Javascript framework, Cypress does not currently support native browser events such as file picker. But don’t get upset!!! We are going to focus on an official npm dependency to make this work.

Installation

1. First, install Cypress to your machine.

npm install cypress

2. Then you need to install node module for Cypress File Upload. I’m using cypress-file-upload dependency provided in the npm site.

Note: With the latest cypress-file-upload package release(v4), methods used in the old version(v3) of cypress-file-upload is now deprecated.

Let’s install the file upload dependency.

npm install cypress-file-upload

3. After successfully installing the cypress-file-upload dependency. Now you have to make sure cypress-file-upload extends Cypress ‘cy’ command. For this add the following line to your project’s cypress/support/commands.js

import ‘cypress-file-upload’;

4. Now go to your node_modules folder and check whether there is a folder called cypress-file-upload. Now

4. Now you have successfully installed the file-upload dependency. Now you are ready to test file uploading. Let’s start!

Coding Steps -

1. First, create a spec.js inside your project’s integration folder.
2. Declare describe and it blocks to write the test case. Write the test case as follows.

Test Script for Upload a File

3. In the above code, I use cy.vist() method to navigate to an existing web application hosted on internet to do the demo.

4. Then create a constant variable for filePath with fileName and the location, that I’m going to upload. Here Cypress always looks into the fixtures folder by default. If you need to give a file that is not inside the fixtures folder make sure to give the path correctly.

5. Then get the element identifier of the Choose File button. Use attachFile function. This is the command that cy got extended through file-upload dependency.

6. Now successfully you have completed the difficult part. After this get the identifier of the Upload button and do as in the above code.

7. Do assertions to make sure correct file is uploaded with the test.

8. Run test using Cypress Test Runner with the following command & select the test file to run.

npx cypress open

Output -

The Test Runner Preview

Conclusion -

Handling file uploads through Cypress is easy now with the latest cypress-file-upload dependency with attachFile(). No need to worry about declaring fixtures, mimeTypes and file content anymore. Hope you got a clear understanding and feel free to try out examples codes in cypress-file-upload package.

References -

cypress-file-upload

The Internet

JavaScript End to End Testing Framework

Happy Testing!

Stay Safe!!!