Cypress how to upload files

What is cypress

Cypress is a popular test framework for UI testing like selenium. Cypress says about itself that it is a developer-focused framework. This means that every feature of cypress should be easy to use and support and speed up developers. I think they do this job very well!

The problem

The problem I want to solve in this article is how to upload files and how to check if those files are correctly uploaded.

How to test file inputs with Cypress?

To upload files in your cypress tests, use the npm package cypress-file-upload.

All files to upload inside Cypress must be located inside your fixtures directory. To upload the chosen file simply target the specific input element.

Let's see this in a simple example.

Example: drag and drop a file in Cypress

Since I`m a huge fan of dropzone.js and the vue-2-dropzone component we are using it as an example. If you want to know how to integrate this into your project visit this article about vue and dropzone.js.

1. Install cypress file upload

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

2. add cypress file upload to your custom commands

   // support/commands.js import 'cypress-file-upload';

3. import commands.js in support/index.js (this should be already done)

   // Import commands.js using ES2015 syntax: import './commands'

   // Alternatively you can use CommonJS syntax: // require('./commands')

4. add your desired files to the fixtures directory
5. Feel free to copy the code below and adapt it to your needs

       context('Assertions', () => {
           beforeEach(() => {
               cy.visit('https://rowanwins.github.io/vue-dropzone/docs/dist/#/demo')
           })
       
           describe('Implicit Assertions', () => {
               it("uploads bg image and references correctly", () => {
                   cy.visit("https://rowanwins.github.io/vue-dropzone/docs/dist/#/demo");
       
                   cy.get('[id="dropzone"]').attachFile("example.json", { subjectType: 'drag-n-drop' });
               });
           });
       });

The above code opens the example page and uploads the example.json file to dropzone.js no you can go ahead and assert for your desired behavior.

This is the result of the above code.

You can also do multiple file uploads in cypress and other cool things, for advanced configurations see the documentation of cypress-file-upload.

Conclusion

Uploading files to cypress is an advanced task. But once you get the concepts and always target the right elements it should be a breeze.

If you want to know more about Cypress or want to connect with me, you can contact me in the Say Hi Section.

If you want to support me and the work I'm doing you can buy me a coffee, I will donate half of it to our friends from Ukraine.

Happy asserting,

Alex