Nightwatch — Upload local files to remote selenium grid

uploadLocalFile.js

const path = require('path')
const util = require('util')
const events = require('events')
const archiver = require('archiver')

const handleResult = cb => result => {
  if (result.status !== 0) throw new Error(result.value.message)
  cb(result.value)
}

function uploadLocalFile () { events.EventEmitter.call(this) }
util.inherits(uploadLocalFile, events.EventEmitter)

/**
 * uploadLocalFile is responsible for using webdriver protocol to upload a local
 * file to a remote Selenium server for use in testing uploads.
 *
 * @argument filePath Local path to the file used for uploading
 * @argument inputSelector Input selector for the file input to upload with
 */
uploadLocalFile.prototype.command = function uploadLocalFile (filePath, inputSelector) {
  const self = this
  const Nightwatch = this.client
  const api = this.api

  const uploadRemote = cb => {
    let buffers = []
    let zip = archiver('zip')
    zip
      .on('data', data => { buffers.push(data) })
      .on('error', err => { throw err })
      .on('finish', () => {
        const file = Buffer.concat(buffers).toString('base64')
        api.session(session => {
          const opt = {
            path: `/session/${session.sessionId}/file`,
            method: 'POST',
            data: { file }
          }
          Nightwatch.runProtocolAction(opt, handleResult(cb)).send()
        })
      })

    const name = path.basename(filePath)
    zip.file(filePath, { name })
    zip.finalize()
  }

  uploadRemote(tempUrl => {
    api.setValue(inputSelector, tempUrl, () => self.emit('complete'))
  })

  return self
}

module.exports = uploadLocalFile

Hello,
you save me a lot of time!
I exchanged arguments (filePath, inputSelector) to comply with the core commands.

Thank you very much.

Thanks a lot

Hi,
Where is the file, that is being uploaded, originally downloaded from?
Can you please provide a sample to use the above utility?
Thanks,
Abe

Works perfectly
Thank you so much !

Thank you!!!

how can I use this function to Nightwatch page object? It's the correct way to put into globals.js or could you guys give the example?

To answer the above from @santhoshrenga

We set our paths in our nightwatch config to:

  src_folders: ["e2e/tests"],
  page_objects_path: ["e2e/pages"],
  globals_path: "./e2e/globals.js",
  custom_commands_path: "e2e/custom_commands",

and the custom commands directory to be roughly like this:

e2e
--custom_commands
-- --uploadLocalFile.js

Shoutout to @kxhsing for finding and crushing this one, and obviously @Bunk for the initial build!

It worth noting it doesn't work with version 1 and above. Nightwatch.runProtocolAction doesn't exist anymore. It took me a while to realise it wasn't working for because of the version.

Hello, is there way to make it work for version 1?

@atrunelle looks like Nightwatch.runProtocolAction still exists but it now implements promises, forked the repository to make it work with v1.
@omicollier there is :)
https://gist.github.com/straris/a940bd27959b38775042f9a1b2ca58ca

@straris that's awesome, thank you!

I adapted the above snippet to work with the new API for runProtocolAction. Line 40 should now be:

          Nightwatch.transport.runProtocolAction(opt).then(handleResult(cb))

@uofmmike and @santhoshrenga

To answer the above from @santhoshrenga

We set our paths in our nightwatch config to:

  src_folders: ["e2e/tests"],
  page_objects_path: ["e2e/pages"],
  globals_path: "./e2e/globals.js",
  custom_commands_path: "e2e/custom_commands",

and the custom commands directory to be roughly like this:

e2e
--custom_commands
-- --uploadLocalFile.js

Need help on Implementing this in the code any sample/example code for the usage will be helpful

@vinodryaka use the following line into your script,

browser.uploadLocalFile(path.resolve('path'), "input[type='file']");

@santhoshrenga pls help me
Error: There was an error while trying to load the file uploadLocalFile.js: Cannot find module 'archiver'

use npm install archiver

Hi, I also use same code. Its working fine for chrome, but for Firefox its not working
When I try to log session object value at line 34 it gives me something like that
{ status: -1, value: 'HTTP method not allowed', errorStatus: -1, error: 'An unknown error has occurred.', httpStatusCode: 405 }

So session.sessionId become undefined and end to end test case gets failed.

I try to upload file on SauceLab environment.

@DineshChopra to make it working in Firefox I removed the session callback (line 34) and used api.sessionId directly:

.on('finish', async () => {
  const file = Buffer.concat(buffers).toString('base64');

  const opt = {
    path: `/session/${api.sessionId}/file`,
    method: 'POST',
    data: { file },
  };

  Nightwatch.transport.runProtocolAction(opt).then(handleResult(cb));
});

@rosariosm still not working for me for firefox. Working fine for chrome.