How to upload a file in Cypress?
Tags: javascript, tutorial, testing, webdev
Published: 2021-10-25 12:34:02

In this tutorial, we will learn how to upload a file in Cypress using the [cypress-file-upload](https://www.npmjs.com/package/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.

![cypress file upload example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2sgg8ynmlvbclm7xtcq.png)

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.

![cypress fixtures folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lreut3a9q3ehjh9qstu3.png)
 

---

### 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 - 

![Cypress .invoke function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn130b2of078njiohu05.png)
 
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 - 

{% youtube 2jVf6u0yKeY %}

---

📧 Subscribe to my [mailing list] (https://bit.ly/sdet-u-mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://bit.ly/sdet-u-twitter)
- [LinkedIn](https://bit.ly/sdet-u-linkedin)

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/dilpreetjohal">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

---

#### Enjoyed this read? Discover more insightful articles on software testing and development on my [blog](https://sdetunicorns.com/blog). 🌐