How to upload a file using WebdriverIO

Question

I'm trying to port the following code from Ruby with the selenium-webdriver gem to Node.js with WebdriverIO:

@webdriver.navigate.to "https://imgur.com/upload"
element = @webdriver.find_element(:id, 'global-files-button')
element.send_keys("C:\\test\\image.png")

As you can see the code is very simple: navigate to a url, find the input, set the file path and it works as expected selecting the file for upload.

This is my ported version:

describe('User can upload', () => {
  it('select file', () => {
    browser.url("https://imgur.com/upload");
    browser.waitForExist('#global-files-button');
    $('#global-files-button').keys("C : \\ t e s t \\ i m a g e . p n g".split(" "));
  });
});

Unfortunately this test doesn't set the path and I haven't been able to find a working example of uploading a file like this with wdio and the documentation has left me guessing. Any suggestions much appreciated.

I'm aware of both chooseFile and uploadFile but I'm working with a cloud platform to run my wdio tests and they don't seem to work reliably.

Answer 1

I've had trouble with this. From what I've researched it is not an issue with WebdriverIO or it's chooseFile() or uploadFile() methods. The root of the issue I believe comes down to an error in Selenium Webdriver being unable to handle the 'multiple' <input type='file' multiple> upload elements.

I fought this for a solid maybe 3 days before stumbling across this github issue: https://github.com/SeleniumHQ/selenium-google-code-issue-archive/issues/2239

Long story short, because the HTML on imgur has the "multiple" property on it, your upload tests won't work correctly. WebdriverIO / Selenium just stops functioning from what I've noticed.

Note: I've been able to actually have my application upload a single file and add files to my system and application while testing an <input type='file' multiple>. The problem is however, that WebdriverIO and Selenium just stops. The tests end, without reporting any success or failure results.

If you go and test another <input type=file> element somewhere across the web that is NOT designated as a "multiple" upload input field you should be able to make the chooseFile() methods from WebdriverIO function correctly.

I hope this helps you and perhaps anyone else who's struggled with file uploads.

EDIT: I've tried to make your example work, and I had success with "chooseFile()" and passing the "filepath" to it directly. Perhaps you're trying to send keyboard commands when you don't really have to? Do you have a direct file path to the image you're attempting to upload? Below is what i was able to use to successfully upload a file.

it('upload a file to imgur', function () {
    browser.url("https://imgur.com/upload");
    browser.waitForExist('#global-files-button');
    browser.chooseFile('#global-files-button', '/insert/path/to/image.png')
}) 

Answer 2

// c:/test/image.png
var test1 = 'c:/test/image.png'
var path = test1.split('/').join('\\\\')
browser.addValue('[name="fileField"]', path )

or maybe this also work

// c:\test\image.png
var path = 'c:\\test\\image.png'
browser.addValue('[name="fileField"]', path )

or maybe this

// c:/test/image.png
var path = 'c:/test/image.png'
browser.addValue('[name="fileField"]', path )