Nightwatch.js中的文件上传测试 [英] File Upload Testing in Nightwatch.js

问题描述

我想在此处重新提出问题，然后此处关于测试使用硒的Nightwatch.js中的文件上传.

I'd like to reopen the question posed here and here about testing file uploading within Nightwatch.js which uses selenium.

两个链接都建议将文件输入元素的值设置为url的解决方案.在我的用例中，我无法使其正常工作.即使在夜视之外在type="file"输入的位置手动设置了值标签，也不会更改url.我已经在开发工具中的Chrome，Firefox和IE10上进行了尝试.

Both links have the recommended solution of setting the value of the file input element as the url. In my use case, I've been unable to get this to work. Even setting the value tag manually, outside of nightwatch, of the input where type="file", does not change the url. I've tried this on Chrome, Firefox, and IE10, within the dev tools.

我看过的另一种解决方案是尝试模拟整个文件上传过程的击键.这将遵循以下路径:单击文件上载按钮，键入路径，然后键入Enter.这可以通过.click和.key方法完成.但是，您将失去对实际文件上传窗口的关注，这会延迟击键，直到关闭该窗口.其他开发人员似乎可以使用Java中的.findElement和.sendKeys方法直接在硒中修复此解决方案，但我不知道如何在javascript和守夜本身中做到这一点.

An alternative solution I've looked at was trying to emulate the entire file upload process keystrokes. This would follow the path of clicking the file upload button, typing the path, and typing enter. This would be done through the .click and .key methods. However, you lose focus of the actual file upload window, which delays the keystrokes until that window is closed. Other developers have seemed to be able to fix this solution directly in selenium using the .findElement and .sendKeys methods in java, but I could not figure out how to do this within javascript and nightwatch itself.

有什么想法吗?

// 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"/>

推荐答案

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

There were two seperate issues with my setValue() method implementation.

1. 在nightwatch命令中使用--verbose标记导致我遇到了一个问题 在操作过程中实际上没有找到输入标签的地方 setValue()，但是在waitForElementVisible()期间. 将input[type="file"]更改为input#fileUpload可以解决此问题 问题.

1. Using the --verbose tag in the nightwatch command led me to an issue where it was not actually finding the input tag during the setValue(), however it was during the waitForElementVisible(). Changing input[type="file"] to input#fileUpload solved this issue.

其次，以下描述路径的方法不起作用...

Secondly, the following ways of describing the path were not working...

• 'textfile.txt'
• 'http://localhost:3000/testfile.txt'(如果在文件上传窗口中手动键入，将可以工作)

• 'textfile.txt'
• 'http://localhost:3000/testfile.txt' (Will work if typed manually into file upload window)

使用require('path').resolve(__dirname + '/testfile.txt')

在此处进行查看，以查看导致该问题的讨论.感谢理查德·弗洛西(Richard-flosi).

工作代码:

Take a look here to see the discussion that led to the fix. Thanks goes out to richard-flosi.

The working code:

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

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