Upload files

[aomelchenko]

Hello, is there any possibility or undocumented feature to upload a file with nightwatch or selenium protocol?

For example here is realisation on java https://saucelabs.com/resources/selenium-file-upload

[beatfactor]

no, there isn't I'm afraid. LocalFileDetector webdriver is not available for node.js yet, as far as I know.

[richard-flosi]

setValue works for uploading a file. I'm doing: .setValue('input[name="image"]', imageFile)

[ghost]

I've attemped to use setValue, however I'm unable to get that to work.

I've reopened the question on stackoverflow here.

[richard-flosi]

@snipes76 Is your input field using the multiple attribute?

[ghost]

No, I am not.

I just tried it with that attribute, but no dice. I just added an .assert.valueContains to make sure the value is set, also.

[richard-flosi]

What browser are you using? Are you sure you are passing the file in correctly?

[richard-flosi]

BTW the multiple attribute won't work with GhostDriver/PhantomJS

[ghost]

Firefox and Chrome. Manually, I'm able to enter "http://localhost:3000/testfile.txt" into the file upload window, and correctly upload the file.

[richard-flosi]

I'm using a file path like this:
.setValue('input[name="file"]', require('path').resolve(__dirname + '/testfile.txt'))

Make sure that you are resolving that path correctly to a file that exists with something like: fs.existsSync(path). You may need to fs = require('fs');

[ghost]

I just tested it the way you provided.

My current directory is basically under a /nw/tests folder that I defined for my test. I made sure to move the testfile.txt there. I verified it using the following code console.log(fs.existsSync(__dirname+ '/testfile.txt'));, which outputs true when running the test. It still does not work in nightwatch, but will work fine manually.

I stated in my stackoverflow question how I manually went into chrome dev tools and set the value of the input to my path, which still did not work. setValue actually works for you in nightwatch? I can't even get setting value in the browser to manually work.

[richard-flosi]

Yes, I am using PhantomJS as my browser, I haven't tried with other browsers, but we have tests that upload images all day long. The only caveat that I'm aware of is that input fields with the multiple attribute set will not work with GhostDriver at the moment.

[ghost]

It's working! Wow. I'll have to dig through everything I did to see why it is working now and wasn't before.

Basically, I decided I'd try using phantomjs instead of just the default with Firefox. My drivers weren't loading correctly, so I fixed that. I also removed multiple from the input tag. I started using --verbose and it was stating "cannot find input[type="file"]" for the .setValue even though it found it for .waitForElementVisible. I changed that to .setValue(input#fileUpload,require('path').resolve(__dirname + '/testfile.txt'). It worked on phantomJS! Then I tried it on IE10, and firefox, and it works fine.

Now that it is working, I tried using "http://localhost:3000/testfile.txt" as the path. That does not work. My suspicision is that changing the path to use the current working directory fixed one issue. Using the ID tag instead of input[type="file"] fixed a different issue.

[richard-flosi]

Great! Save your code! 👍

[roughpandaz]

@richard-flosi - Hi dude. Working on Nighwatch and phantomjs here.
Made sure that path/image.png is accurate
.setValue('input[data-hook="appIconText"]', path/image.png)
But it just hangs up when uploading the file.

Everything is visible. Would be really grateful to get some help to see how u got it working/ thanks

[roughpandaz]

@timaw how did u get the phantomjs to work?

This is what the html element looks like:

Any help would be Much appreciated. Thanks

[dev-bjoern]

How do I detect when the upload is finished to continue the test?

[richard-flosi]

@chickenwing I would imagine your UI would change to indicate something to the user, so I would just look for that change.

[climboid]

With regards to this, if I'm using a File reader const reader = new FileReader(); and I when how do I trigger an onload event? reader.onload = () => { ... } ? Not sure if I need to have a submit form action in order for nightwatch to trigger the file upload?

[Shakes03]

@RongxinZhang Im also testing with phantomjs, had the issue where the upload just hangs.
my html
<input type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none;">

Resolution was to remove the style attribute
my page object action looks like this

  uploadAFileNamed(fileName) {
    this.api.execute(function removeStyle(selector) {
      return document.querySelector(selector).removeAttribute('style');
    }, ['input[type=file]']);

    this.setValue('input[type=file]', `${__dirname}/fixtures/${fileName}`);

    return this.api;
  }

[mayurmohite]

no, there isn't I'm afraid. LocalFileDetector webdriver is not available for node.js yet, as far as I know.

Is filedetector available now for nodejs to upload file on browserstack?