Nightwatch.js 中的文件上传测试答案

【问题标题】：File Upload Testing in Nightwatch.jsNightwatch.js 中的文件上传测试
【发布时间】：2014-09-18 18:18:33
【问题描述】：

我想重新提出 here 和 here 提出的关于在使用 selenium 的 Nightwatch.js 中测试文件上传的问题。

两个链接都有将文件输入元素的值设置为 url 的推荐解决方案。在我的用例中，我无法让它工作。即使在守夜人之外手动设置 type="file" 输入的值标签，也不会更改 url。我已经在开发工具中的 Chrome、Firefox 和 IE10 上尝试过这个。

我研究过的另一种解决方案是尝试模拟整个文件上传过程中的击键。这将遵循单击文件上传按钮、输入路径和输入回车的路径。这将通过.click 和.key 方法完成。但是，您会失去实际文件上传窗口的焦点，这会延迟击键，直到该窗口关闭。其他开发人员似乎能够使用 java 中的 .findElement 和 .sendKeys 方法直接在 selenium 中修复此解决方案，但我无法弄清楚如何在 javascript 和 nightwatch 本身中执行此操作。

有什么想法吗？

// My test
      module.exports = {
      "Standard File Upload" : function (browser) {
        browser
          .url("http://localhost:3000")
          .waitForElementVisible('body', 1000)
          .waitForElementVisible('input[type="file"]', 1000)
          .setValue('input[type="file"]','http://localhost:3000/testfile.txt')
          .click('#submit')
          .pause(1000)
          .assert.containsText('h3', 'File Uploaded Successfully')
          .end();
      }
    };

// http://localhost:3000/testfile.txt was tested manually in the file upload window and worked successfully

<!-- My input tag --> 
<input id="fileUpload" type="file" name="textfile"/>

【问题讨论】：

标签： selenium nightwatch.js

【解决方案1】：

我的setValue() 方法实现有两个单独的问题。

在 nightwatch 命令中使用 --verbose 标记导致我遇到问题在此期间它实际上没有找到输入标签 setValue()，但那是在waitForElementVisible() 期间。将input[type="file"] 更改为input#fileUpload 解决了这个问题问题。
其次，以下描述路径的方式不起作用...
- 'textfile.txt'
- 'http://localhost:3000/testfile.txt'（如果手动输入文件上传窗口将起作用）
起作用的是使用require('path').resolve(__dirname + '/testfile.txt')

查看here 以查看导致修复的讨论。感谢理查德弗洛西。

工作代码：

module.exports = {
  "Standard File Upload" : function (browser) {
    browser
      .url("http://localhost:3000")
      .waitForElementVisible('body', 1000)
      .waitForElementVisible('input#fileUpload', 1000)
      .pause(1000)
      .setValue('input#fileUpload', require('path').resolve(__dirname + '/testfile.txt')) // Works
//      .setValue('input#fileUpload', "testfile.txt") // Will not work
//      .setValue('input#fileUpload', "http://localhost:3000/testfile.txt") // Will not work
//      .setValue('input[type="file"]', require('path').resolve(__dirname + '/testfile.txt')) // Will not work
      .click('#submit')
      .pause(1000)
      .assert.containsText('h3', 'File Uploaded Successfully')
      .end();
  }
};

【讨论】：

我看到这个答案是很久以前发布的，但也许你可以帮助我处理发布到 s3 的文件。我需要处理文件路径类似于https://..../file.zip 的情况。但是如何在文件上传窗口中输入这个路径呢？

【解决方案2】：

我不确定您为什么会遇到这些问题，也许检查一下您是否使用的是最新版本的 selenium 服务器和 nightwatch。此代码在 Chrome、Safari、Firefox、IE7/8/9/10/11 中对我 100% 有效（未在 IE6 中测试，但也可以假设）。

driver.setValue('input#fileUpload', __dirname + '\\testfile.txt')

【讨论】：

【解决方案3】：

就我而言，我还有一个问题，因为我尝试上传的文件在我的目录结构中太高了。

只要我将文件移动到实际测试文件的同一级别（或子目录中），一切就正常了。

来自我的page-objects 文件夹中的脚本：

// No dice:
var fullPath = require('path').resolve(__dirname + '/../../somefile.pdf');

// Works:
var fullPath = require('path').resolve(__dirname + '/../somefile.pdf');

this.setValue('input#fileUpload', fullPath);

【讨论】：