File upload in Testcafe with hidden input

Question

I want to test upload folder/ multiple files using testcafe. It has couple of steps to upload files.

• Step - 1: Click on file browse button to select files
• Step - 2: Native Confirmation box to confirm the Upload
• Step - 3: Click on Upload button to upload files

In the HTML code, input [type=file] is hidden. HTML Code:

<div class="col-md-12">
    <input type="button" class="btn btn-primary btn-exec" value="Select Files" id="fileBrowseBtn">
    <input type="file" id="selectFiles" webkitdirectory="" style="display: none">
</div>

I tried with the following code but was not working at all.

 await t
.click(Selector('#fileBrowseBtn'))
.setNativeDialogHandler(() => true)
.setFilesToUpload(Selector('input').withAttribute('type','file'), [
            './uploads/1.jpg',
            './uploads/2.jpg',
            './uploads/3.jpg'
        ])
.setNativeDialogHandler(() => true)
.click(Selector('#uploadWizard').find('button').withText('Upload'))

Can anyone help me with workable example? I tried lots but may be I missed something. Thanks in advance.

Scattering

Answer 1

According to an example, you should not open the 'Choose file' dialog.

Try to simplify your code as follows:

await t
.setFilesToUpload(Selector('input').withAttribute('type','file'), [
            './uploads/1.jpg',
            './uploads/2.jpg',
            './uploads/3.jpg'
        ])
.click(Selector('#uploadWizard').find('button').withText('Upload'))

Majors

You can see a detailed description of how to test file upload in TestCafe and inspect a runnable example here. – Majors