使用Dropzone.js的NIghtwatch.js文件上传 [英] NIghtwatch.js File Upload with Dropzone.js

问题描述

我正在尝试使用nightwatch.js在我们的文件上传中上传pdf文件，但问题是我们的上传文件中没有输入type ="file". html看起来像这样:

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>

我尝试将密钥发送到div，div和i表单，但无济于事.这是我尝试上传文件的代码:

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")
};

上传从我代码的setvalue部分开始.上部只是进入上传模式的步骤.在此先感谢！

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!!

更新 我在html上找到了一个隐藏的输入字段，但是即使我使用setValue，它也不会上传我的文件.

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

推荐答案

我正在使用Dropzone.js上载文件.它使输入type ="file"隐藏.而且nightwatch.js不会在隐藏元素上设置setValue，因此我们需要在设置值之前先看到输入元素.

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.

解决方案是

第1步:使隐藏的输入元素可见

step 1: make that hidden input element visible

第2步:为该输入元素设置值

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将输入元素的样式从无更改为块. 这是文档链接 http://nightwatchjs.org/api#execute

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]')将返回元素数组，在我的情况下，我需要在第0个位置放置元素，因此我在querySelectorAll的末尾添加了[0].

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.

注意:您还可以在控制台上运行此JavaScript代码，以查看其是否选择了正确的元素.

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'))

在我的情况下，有一个id为上传图标"的div，其输入为type ="file"

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

这篇关于使用Dropzone.js的NIghtwatch.js文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！