Question

我正在尝试使用nightwatch.js在我们的文件上传中上传pdf文件，但事情是没有输入类型=＆＃34;文件＆＃34;在我们上传。 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，它也不会上传我的文件。

Answer 1

我使用Dropzone.js上传文件。它使输入类型=＆＃34;文件＆＃34;隐藏。并且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正在将输入元素的样式从none更改为block。这是文档链接http://nightwatchjs.org/api#execute

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

document.querySelectorAll（＆＃39; input [type = file]＆＃39;）将返回元素数组，在我的情况下，我需要第0个位置的元素，所以我在querySelectorAll的末尾添加了[0]

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

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

在我的情况下，有一个id为id =＆＃34;上传图标＆＃34;输入类型=＆＃34;文件＆＃34;

Answer 2

我和你在同一个位置。至于隐藏的输入，我相信nightwatch只能上传可见元素。

Answer 3

你可以像这样看到＆gt;

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

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

Answer 4

截至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)

用Dropzone.js上传NIghtwatch.js文件

4 个答案: