0

Can someone help me with uploading files in TestCafe? I have the following html (I have removed the classes for better readability:

<form id="__uploader0-fu_form" enctype="multipart/form-data" method="post" action="" target="__uploader0-frame" style="display: inline-block;">
    <div>
        <div class="sapUiFupGroup" style="border: 0; cellPadding: 0; cellSpacing: 0;">
            <div>
                <div style="display: none;">
                    <div id="__uploader0-fu_input">
                        <div id="__uploader0-fu_input-content">
                            <input id="__uploader0-fu_input-inner"></div>
                        </div>
                    </div>
                    <div>
                        <button id="__uploader0-fu_button">
                            <span id="__uploader0-fu_button-inner">
                                <span id="__uploader0-fu_button-img" role="presentation" aria-hidden="true"/>
                            </span>
                            <span id="__uploader0-fu_button-tooltip">Searching</span>
                        </button>
                    <span id="__uploader0-AccDescr" aria-hidden="true">Activate to select file</span>
                </div>
            </div>
        </div>
        <div>
            <input type="file" aria-hidden="true" name="__uploader0" id="__uploader0-fu" tabindex="-1" size="1" accept=".jpg,.jpeg,.pdf,.docx">
            <input type="hidden" name="_charset_" aria-hidden="true">
            <input id="__uploader0-fu_data" type="hidden" aria-hidden="true" name="__uploader0-data" value="">
        </div>
    </div>
</form>

I have tried:

await t.setFilesToUpload(Selector('#__uploader0-fu'), ['../data/a.pdf']);

And

await t.setFilesToUpload(Selector('input').withAttribute('type','file'), ['../data/a.pdf']);

But it's not working.

The upload button/form looks like this: screenshot upload

yusufkaracaburun
  • 1
  • 2
  • 1
    What's the error you are getting ? – VysakhMohan Feb 23 '21 at 15:27
  • That's the strange part, I'm getting no errors. In debug mode I also dont see any files attached. For to be sure I've made an expect with count, but it fails because actual count is 0, while expected is 1 – yusufkaracaburun Feb 24 '21 at 08:34
  • The upload button might be in hidden state. Try executing `document.querySelector("input[type='file']").click()` in chrome console and check whether it is clickable or not. – VysakhMohan Feb 24 '21 at 11:27
  • Result: undefined, but the window for selecting files is opened. And in TestCafe I'm getting: The element that matches the specified selector is not visible. – yusufkaracaburun Feb 24 '21 at 13:37
  • Check whether the element is inside any Iframe. Also check the path of the file is correct. – VysakhMohan Feb 24 '21 at 15:23
  • filepath is correct, i've checked multiple times. the element is also not inside an iframe. – yusufkaracaburun Feb 25 '21 at 16:32
  • It is not clear from your example how you confirm the upload. What do I need to click in order for the files to be sent to the server? If it is 'Enter', then add the following line to the test: `t.pressKey('enter');` – Ilya Afanasenko Mar 01 '21 at 09:20
  • sorry for my late response. i have also tried with t.pressKey('enter') and now the window for selecting files is opened. I have also added a validation: const input = Selector('input[type="file"]'); await t.setFilesToUpload(input, ['../data/gta.pdf']) .expect(input.value).eql('C:\\fakepath\\gta.pdf') this step is passed, but I can't see the file in the uploaded section – yusufkaracaburun Mar 16 '21 at 12:23

1 Answers1

1

TestCafe's file upload emulation is different from what a real user would do to upload files. The uploaded file will not be displayed next to the file selection button. See an example. https://github.com/DevExpress/testcafe-examples/tree/master/examples/upload-files

You can manually check whether files were actually uploaded to the server by clicking on the submit form button before that, but from your example it is not clear how you send the results to the server. For more information, see the documentation: https://devexpress.github.io/testcafe/documentation/recipes/basics/test-file-upload.html

Viktoriya Chernookaya
  • 303
  • 1
  • 5