NIghtwatch.js 文件上传与 Dropzone.js答案

【问题标题】：NIghtwatch.js File Upload with Dropzone.jsNIghtwatch.js 文件上传与 Dropzone.js
【发布时间】：2015-09-22 11:41:44
【问题描述】：

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

<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 和 i 发送密钥，但无济于事。这是我如何尝试上传文件的代码：

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 部分开始。上半部分只是进入上传模式的步骤。提前致谢！！

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

【问题讨论】：

标签： javascript selenium file-upload dropzone.js nightwatch.js

【解决方案1】：

我正在使用 Dropzone.js 上传文件。它使输入 type="file" 隐藏。而且 nightwatch.js 没有在隐藏元素上设置值，所以我们需要在设置值之前看到输入元素。

解决办法是

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

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

下面是我上传图片的功能测试用例。

'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 正在将 input 元素的样式从 none 更改为 block。这是文档链接http://nightwatchjs.org/api#execute

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

document.querySelectorAll('input[type=file]') 将返回元素数组，在我的情况下，我需要第 0 个位置的元素，所以我在 querySelectorAll 的末尾添加了 [0]。

注意：您也可以在控制台上运行此 JavaScript 代码，看看它是否选择了正确的元素。

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

在我的例子中，有一个 id="Upload Icon" 的 div 输入了 type="file"

【讨论】：

【解决方案2】：

你可以这样让它可见>

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

之后，您可以设置上传值。

【讨论】：

【解决方案3】：

截至Dropzone v3.12.0（注意：最新版本为v5.4.0）

您可以在 nigthwatch.js 中执行此操作来上传文件。

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

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

【讨论】：