使用 Dropzone.js 上传 Nightwatch.js 文件

Question

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:

<form id="dropzone" action="/v2/asset/56013895934fd606006fb314" class="dropzone dz-clickable">
    <div class="dz-clickable" id="dropzonePreview">
        <i class="fa fa-cloud-upload main-icon initial-icon"></i>
    </div>
    <div class="dz-default dz-message">
        <span>Drop a file here or click icon above to upload an image</span>
    </div>
</form>

I tried sending keys to the form, div and i but to no avail it wont work. This is my code on how i try upload the file:

var uploadInvoice = function(browser) {
    browser
        .waitForElementPresent(dashboardselector.view_assignment, 20000)
        .click(dashboardselector.view_assignment)
        .waitForElementVisible(".fa-plus", 20000)
        .click(".fa-plus")
        .click(".regionBillAsset > div:nth-child(1) > a:nth-child(1)")
        .setValue("#dropzone", require('path').resolve(__dirname+'/document.pdf'))
        .waitForElementVisible(".after-success", 20000)
        .click(".after-success")
};

the upload starts on the setvalue part of my code. The upper part are just steps to go to the upload modal. Thanks in advance!!

UPDATE I have found a hidden input field on the html but even though I use setValue, it won't upload my file.

Answer 1

I am using Dropzone.js for uploading file. It makes the input type="file" to hidden. And nightwatch.js does not setValue on hidden element so we need to visible the input element before setting value.

Solution is

step 1: make that hidden input element visible

step 2: set value to that input element

below is my functional test case for uploading image.

'uploadin the image': (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"

Answer 2

I'm in the same position as you. And as far as the hidden input, I believe nightwatch can only upload on visible elements.

Answer 3

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.

Answer 4

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)