Sometimes, we want to test file inputs with Cypress and JavaScript.

In this article, we’ll look at how to test file inputs with Cypress and JavaScript.

How to test file inputs with Cypress and JavaScript?

To test file inputs with Cypress and JavaScript, we use the cypress-file-upload package.

To install it, we run

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

Then we use it by writing

import "cypress-file-upload";

const fixtureFile = "photo.png";
cy.get('[data-cy="file-input"]').attachFile(fixtureFile);

to call cy.get to select the file input with the data-cy attribute set to file-input.

And then we call attachFile to set the file input to the fixtureFile path.

Conclusion

To test file inputs with Cypress and JavaScript, we use the cypress-file-upload package.