SDET Unicorns

How to upload a file in Cypress?

Table of Content

In this tutorial, we will learn how to upload a file in Cypress using the cypress-file-upload NPM package. Cypress does not have a native support to do file uploads at the moment, however, this is something they plan to add in the future.

Installation

Since, we need to use a third-party library to do file upload, we will need to get that installed and setup to make it work with Cypress. 

Install NPM Package

First thing you need to do is install the package — 

npm install --save-dev cypress-file-upload

Setup Custom Command

cypress-file-upload library provides a custom command which we can use once we set it up. To do that, we need to import the library in the custom command file (cypress/support/commands.js) like this —

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 Test

Now, that we have installed the package, we can go ahead and start using the custom command. In the example below, I will be uploading a file on my test website.

1*74FrIYh
cypress file upload example

The key thing to focus on the example above is the .attachFile() command which is added by the helper library that we installed. It takes in a parameter i.e. the file name which should be included inside the fixtures folder as shown below.

1*gK
cypress fixtures folder

Working with hidden input fields

Typically, the .attachFile() command would work if the input[type=file] element is intractable. However, if the element is hidden then you will need to make necessary changes to make the element visible and intractable again. You can do that using the help of the Cypress .invoke() function as seen below — 

1*dJWKCIEMdCVLvS5Jf2zGUA
Cypress .invoke function

In this example, I am removing the hidden class using the jquery removeClass function which is making my element intractable again.


To learn more about how to upload a file in Cypress, checkout the video below — 

Hope you enjoyed reading this article!

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

image

Common Types of Software Bugs

Dealing with bugs is one of the biggest headaches in the software development lifecycle. No matter how carefully someone writes code, it’s impossible to create a software product that works perfectly every time. Skipping detailed testing often causes major issues later on.

Read More »
How to inspect elements in Chrome?

How to Inspect Elements in Chrome?

Understanding how to use the “Inspect Element” feature in Chrome is a critical skill for web developers and designers alike. This tool is indispensable, no matter what web development task you’re tackling.

From resolving layout issues and debugging JavaScript to analyzing a webpage’s structure, Chrome’s Developer Tools’ “Elements” panel offers a robust suite of functionalities that enable you to delve into the HTML, CSS, and JavaScript that power websites.

Read More »