repository·main·Indexed 19 days ago
https://github.com/abramenal/cypress-file-uploadA Cypress plugin version 5.0.8 that provides the .attachFile() command to simplify file upload testing. It supports standard HTML5 file inputs and drag-and-drop components, allowing for single or multiple file uploads from fixtures or raw binary content. The library includes support for various file encodings, MIME types, and provides specialized testing recipes for AngularJS (ng-file-upload), React (react-dropzone, react-html5-input), and native Shadow DOM implementations.
The cypress-file-upload repository provides specialized testing recipes for common frontend UI setups to facilitate file upload testing in Cypress. Currently, recipes are available for the following technologies:
ng-file-uploadreact-dropzoneTo run the shadow-dom-native project locally, install the dependencies and start the development server. You can then open the Cypress test runner in a separate terminal window to execute tests.
# Install dependencies and start the project
npm install
npm start
# In a separate terminal, open Cypress
npm run test:openTo use the custom commands, you must import the package in your cypress/support/commands.js file:
import 'cypress-file-upload';Then, ensure that commands.js is imported in your cypress/support/index.js file:
import './commands';To run the react-dropzone recipe locally, install the dependencies and start the development server. In a separate terminal window, you can open the Cypress test runner to interact with the application.
npm install
npm startAnd within a separate terminal window:
npm run test:openTo run the react-html5-input project locally, use the following commands to install dependencies and start the development server. To run tests in an interactive mode, use the test command in a separate terminal window.
# Install dependencies and start the project
npm install
npm start
# In a separate terminal, open the test runner
npm run test:openInstall the package as a development dependency using npm:
npm install --save-dev cypress-file-uploadIf you are using TypeScript, add the package to your tsconfig.json types:
"compilerOptions": {
"types": ["cypress", "cypress-file-upload"]
}To ensure your test doesn't proceed before the file upload is finished, use Cypress's cy.intercept (or cy.route/cy.server in older versions) to watch the specific POST request sent during upload, and then use cy.wait() to pause execution until that request completes.
// start watching the POST requests
cy.server({ method:'POST' });
// and in particular the one with 'upload_endpoint' in the URL
cy.route({
method: 'POST',
url: /upload_endpoint/
}).as('upload');
const fileName = 'upload_1.xlsx';
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('#input_upload_file').attachFile({
fileContent,
fileName,
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
encoding:'utf8',
lastModified: new Date().getTime()
})
})
// wait for the 'upload_endpoint' request, and leave a 2 minutes delay before throwing an error
cy.wait('@upload', { requestTimeout: 120000 });
// stop watching requests
cy.server({ enable: false })To run the angularjs-ng-file-upload project locally, follow these steps:
npm install
npm startnpm run test:opennpm install
npm start
# In a separate terminal
npm run test:openTo use the attachFile command in your Cypress tests, you must import the package in your cypress/support/e2e.js (or cypress/support/index.js) file. This registers the command globally on the cy object. The command is designed to work with a previous subject (e.g., a file input element).
import 'cypress-file-upload';If you need to perform custom preprocessing on a file, you can pass the raw binary content using the fileContent property. When doing this, you must also provide filePath (to provide metadata/encoding) or manually provide fileName, mimeType, and encoding.
const special = 'file.spss';
cy.fixture(special, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('[data-cy="file-input"]').attachFile({
fileContent,
filePath: special,
encoding: 'utf-8',
lastModified: new Date().getTime()
});
});To upload files to a drag-and-drop component, use the .attachFile() command and provide an options object with subjectType: 'drag-n-drop'.
cy.get('[data-cy="dropzone"]')
.attachFile('myfixture.json', { subjectType: 'drag-n-drop' });To upload a file to a standard HTML5 file input, use the .attachFile() command on the input element. You can pass a string representing the fixture file name (located in cypress/fixtures).
cy.get('[data-cy="file-input"]')
.attachFile('myfixture.json');