File Upload Testing in Nightwatch.js

Question

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

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.

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.

Any ideas?

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

Answer 1

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

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.

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

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

   
   What did work was using require('path').resolve(__dirname + '/testfile.txt')

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