NIghtwatch.js File Upload With Dropzone.js

I am trying to upload a pdf file on our file upload using nightwatch.js but the thing is there are no input type='file' on our upload. The html looks like this:

: (browser) => { browser .execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';") .pause(100) .setValue('//div[@id="Upload Icon"]/input[@type="file"]', require('path').resolve(__dirname + '/categoryIcon.png')) .waitForElementVisible('//div/span[text()="Change Icon"]', 5000) .assert.containsText('//div/span[text()="Change Icon"]', 'Change Icon') .pause(2000) .end(); }

execute is changing the style of input element from none to block. Here is the documentation link http://nightwatchjs.org/api#execute

.execute("document.querySelectorAll('input[type=file]')[0].style.display = 'block';")

document.querySelectorAll('input[type=file]') will return the array of elements and in my case i need element on the 0th position so i added [0] at the end of querySelectorAll.

Note: You can also run this JavaScript code on the console to see if it is selecting the right element.

.setValue('//div[@id="Upload Icon"]/input[@type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))

In my case there is a div with id="Upload Icon" which has input with type="file"

Solution 2:

You can make it visible like this >

client.execute(function(data){
      document.querySelector('input[type="file"]').className="";
    }, [], function(result){
      console.log(result);
});

after this you can set your value for upload.

Solution 3:

as of Dropzone v3.12.0 (note: the newest version is v5.4.0)

You can do this in nigthwatch.js to upload a file.

browser
.execute(`
 // this makes the DropZone hidden input, visible

document.querySelector('input[type="file"]').style.visibility = "visible";
`)
.setValue('input.dz-hidden-input', AbsolutePathToFile)