How to test file inputs with Cypress?
it('Testing picture uploading', () => {
cy.fixture('testPicture.png').then(fileContent => {
cy.get('input[type="file"]').attachFile({
fileContent: fileContent.toString(),
fileName: 'testPicture.png',
mimeType: 'image/png'
});
});
});
Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload
Note: testPicture.png must be in fixture folder of cypress
For me the easier way to do this is using this cypress file upload package
Install it:
npm install --save-dev cypress-file-upload
Then add this line to your project's cypress/support/commands.js
:
import 'cypress-file-upload';
Now you can do:
const fixtureFile = 'photo.png';
cy.get('[data-cy="file-input"]').attachFile(fixtureFile);
photo.png
must be in cypress/fixtures/
For more examples checkout the Usage section on README of the package.