File upload testing made easy.
This package adds a custom Cypress command that allows you to make an abstraction on how exactly you upload files through you HTML controls and focus on testing the functionality.
The package is distributed via npm, bundled with uglify-es and should be installed as one of your project's devDependencies:
npm install --save-dev cypress-file-uploadcypress-file-upload extends Cypress' cy command.
Add this line to your project's cypress/support/commands.js:
import 'cypress-file-upload';Here is a basic example:
cy.fixture('data.json', 'base64').then(fileContent => {
cy.get('[data-cy="dropzone"]').upload(
{ fileContent, fileName: 'data.png', mimeType: 'application/json' },
{ subjectType: 'drag-n-drop' },
);
});See more usage guidelines in example.
Exposed command in a nutshell:
cySubject.upload(fileOrArray, processingOpts);fileOrArray is an object (or an array of those) that represents file information and contains following properties:
- {String}
fileContent– raw file content, usually a value obtained fromcy.fixture - {String}
fileName– file name (with extension) - {String}
mimeType– file mime type
processingOpts contains following properties:
- {String}
subjectType– target (aka subject) element kind:'drag-n-drop'component or plain HTML'input'element. Defaults to'input'.
Thanks goes to these wonderful people (emoji key):
 James Hollowell 💻 |  lunxiao 🐛 |  Oliver O'Donnell 🐛 💻 |  Peter Colapietro 📖 |  km333 🐛 |  Kevin Mui 💻 🤔 |  Ben Wurth 🐛 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!