How to test file inputs with Cypress?

javascript testing integration-testing e2e-testing cypress
sidoshi picture sidoshi · Nov 2, 2017 · Viewed 30k times · Source

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

Muhammad Bilal picture Muhammad Bilal · Nov 20, 2019 
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

Related questions

How to check if a string array contains one string in JavaScript?

I have a string array and one string. I'd like to test this string against the array values and apply a condition the result - if the array contains the string do "A", else do "B". How can I do …

Read More
How to write a test which expects an Error to be thrown in Jasmine?

I'm trying to write a test for the Jasmine Test Framework which expects an error. At the moment I'm using a Jasmine Node.js integration from GitHub. In my Node module I have the following code: throw new Error("Parsing …

Read More
How to check whether dynamically attached event listener exists or not?

Here is my problem: is it possible somehow to check for existence of dynamically attached event listener? Or how can I check the status of the "onclick" (?) property in DOM? I have searched internet just like Stack Overflow for a …

Read More