Upload File in Nightwatch

[Peter]

How to select the file in MS Windows file explorer and open it for upload? 

Thanks. 

[Peter]

Can anyone provide some examples?

[Timur]

((id,name)=>{
this.setValue(id, require('path').resolve(__dirname + '/' + name))
})()

[Peter]

Can simplify the command? How to set the path?

[Peter]

.setValue('//*[@id="profilefileupload"]', require('path').resolve(batchFile + 'batch.xls'))
.click('//*[@id="btnimportprofile"]')

I try with this following command but it is not working. 

<input type="file" class="displaynone" name="profilefileupload" id="profilefileupload" style="display:none">

<button id="upload" type="button" class="btn btn-sm btn-outline btn-info">Browse</button>

I using Nightwatch 0.9.19. 

 

[Peter]

The file open dialog keeps open and does not select any file. Why is this happening?

[Andy Milbeck]

Timur could you provide some more context for this code snippet? I'm actually trying to accomplish the same this thing right now and having a tough time figuring it out. Is this snippet uploading a file from the Windows file explorer? Tried doing it by using node.exec() but I can't quite figure it out. I have figured out how to open the file explorer and select a file but that same code doesn't work for uploading files. Any additional details would be appreciated. Thanks!

[Timur]

Hey Andy, you are right
_dirname - it's folder, where your uploaded file is located.
name - filetitle

at first write in header of file console.log(_dirname), and you will see where is that place, where you should have file for uploading.

[Andrew King]

When I hit situations like this, I drive the keyboard instead of UI elements.  Sadly, NDA.  Can't post the code sample.

[Andy Milbeck]

Andrew, could you share what you are using to drive the keyboard? I looked at the KeyboardEvent Web API docs but I still don't think this will work for me. Or if it would, I don't really understand how to use it. In the app I'm testing we are using dropzone.js to upload files. Once a user clicks on the 'upload' area the windows file explorer opens up and then you can browse to the file. If I can figure out how to send keyboard events to this window then it would work. The problem with KeyboardEvent is that it still requires an element in the DOM to receive the dispatch event. 

I have an input element but it is hidden an when I try to use setValue() it tells me the element cannot be manipulated. 

<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

Here is a screenshot of what I need to do. If you can't post any code samples can you at least let me know what you are doing to "drive the keyboard"?

[Patrick Romo]

Hi Andrew,

First off try this solution from stackoverflow written specifically for the dropzone library that your team i using. It looks like a winner with possibly a few modifications to make it nightwatch friendly.

https://stackoverflow.com/a/38234952/3103515

If that did not work try below...

I would really push to see if you can access the hidden input and pass the directory path into it. By driving the keyboard I think Andrew was referring to desktop automation which in my opinion is NOT ideal for keeping your test suite maintainable/reliable. To make it visible go on the web page open the dev tools and remove the style attribute entirely on the element and then see if the input box is now visible. If so write a browser.execute command to also remove the style attribute so you can pass in your absolute directory path that contains the file you want to upload. It may or may not work these type of components are not very test automation friendly. The alternative is to use a library like robot.js (http://robotjs.io/) so you can manipulate the file explorer using the arrow keys and also typing the characters of the folder of files you need to traverse to get to your file this brings them into focus saving your some arrow key clicks. Once you have the file in focus that you want to upload you need to use the desktop automation to press the ENTER key. Nightwatch will not be able to help you with the file explorer. But once again driving the keyboard should be a last resort.