How to test file inputs with Cypress?

Question

How can I write an e2e test of flow that requires interaction with the file Input DOM element?

If it's a text input I can interact with it (check value, set value) etc as its a DOM component. But If I have a File Input element, I am guessing that the interaction is limited till I can open the dialog to select a File. I can't move forward and select the file I want to upload as the dialog would be native and not some browser element.

So how would I test that a user can correctly upload a file from my site? I am using Cypress to write my e2e tests.

Answer 1

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

Answer 2

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.