Testing file uploads in Nightwatch.js

Question

I would like to reopen the question here and here loading the downloadable file into Nightwatch.js that uses selenium.

Both links have a recommended solution for setting the value of a file input element as a URL. In my use case, I could not get this to work. Even setting the sign of the value manually, outside of night vision, to the input, where type="file" , does not change the URL. I tried this in Chrome, Firefox and IE10 in dev tools.

The alternative solution I was looking at was trying to emulate all the keystrokes of the file upload process. This will follow the path of clicking the file download button, input path and input input. This will be done using the .click and .key . However, you lose focus on the actual file download window, which delays keystrokes until this window is closed. Other developers seemed to be able to fix this solution directly in selenium using the .findElement and .sendKeys in java, but I could not figure out how to do this in 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

In my implementation of the setValue() method, two separate issues occurred.

• Using the -verbose tag in the nightwatch command led me to a problem where it did not actually detect the input tag during setValue() , however it was during waitForElementVisible() . Changing input[type="file"] to input#fileUpload resolved this issue.

• Secondly, the following ways of describing the path did not work ...

  • 'textfile.txt'
  • 'http://localhost:3000/testfile.txt' (Will work if entered manually in the file download window)

  
  Which worked using require('path').resolve(__dirname + '/testfile.txt')

Look here to see the discussion that led to the fix. Thanks, turned to richard-flosi.

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

Answer 2

I'm not sure why you are having these problems, maybe check if you are using the latest version of selenium server and nightwatch. This code works for me 100% in the browsers Chrome, Safari, Firefox, IE7 / 8/9/10/11 (not tested in IE6, but assume this).

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