Test File Upload

This recipe shows how to test your application's file upload functionality with TestCafe.

Full Example Code

In the case of the following HTML:

<body>
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
        <input id="upload-input" type="file" name="files" multiple />
        <input type="submit" id="upload-btn" value="Upload Files"/>
    </form>
</body>

TestCafe's file upload emulation is differrent from what a real user would do to upload files.

To manually upload files on this page, the user needs to perform the following steps:

  • Click the 'Choose File' button that opens the 'Choose file' dialog in the browser
  • Select the files
  • Begin the upload

TestCafe cannot interact with the native dialog. It uses the .setFilesToUpload action to directly change the state of the <input type="file"> element.

The sample page includes a <form> that contains:

  • an <input> element that holds the selected files
  • a submit button that initiates the file upload to the server.

Below is the full test code and a step-by-step explanation of the file upload process in TestCafe.

import { Selector } from 'testcafe';

fixture `My fixture`
    .page `./index.html`

test('Check uploaded files', async t => {

    await t
        .setFilesToUpload('#upload-input', [
            './uploads/text-file-1.txt',
            './uploads/text-file-2.txt'
        ])
        .click('#upload-btn');
});

Start with an empty test.

import { Selector } from 'testcafe';

fixture `My fixture`
    .page `./index.html`

test('Check uploaded files', async t => {
    // Here you will put test code.
});

Use the setFilesToUpload method to populate the <input> with files. Then, click the submit button.

await t
        .setFilesToUpload('#upload-input', [
            './uploads/text-file-1.txt',
            './uploads/text-file-2.txt'
        ])
        .click('#upload-btn');

This sends the selected files to the server. Note that with TestCafe, you don't need to click the <input type="file"> element itself to select the files.

You can use the clearUpload action to empty the <input>.