How to upload a file using WebdriverIO

Question

I am trying to port the following code from Ruby with the selenium-webdriver gem to Node.js using 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: go to the URL, find the input, set the path to the file, and it works as expected by selecting the file to 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 : \\ test \\ image . png".split(" ")); }); }); 

Unfortunately, this test does not set the path, and I could not find a working example of downloading a file like this with wdio, and the documentation left me guessing. Any suggestions are greatly appreciated.

I know both selectFile and uploadFile, but I work with a cloud platform to run my wdio tests, and they don't seem to work reliably.

Answer 1

I had problems with this. From what I explored, this is not a problem with WebdriverIO or the selectFile () or uploadFile () methods. The root of the problem, in my opinion, boils down to an error in Selenium Webdriver, which is unable to process the load elements 'multiple' <input type='file' multiple> .

I struggled with this for a lasting, maybe 3 days, before stumbling over this github issue: https://github.com/SeleniumHQ/selenium-google-code-issue-archive/issues/2239

In short, because imgur HTML has a "multiple" property on it, your loading tests will not work correctly. WebdriverIO / Selenium just stops functioning from what I noticed.

Note. I was able to actually download the application to a single file and add files to my system and application while testing <input type='file' multiple> . However, the problem is that WebdriverIO and Selenium just stop. The test ends without reporting any successes or failures.

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

Hope this helps you and possibly anyone who struggled with file uploads.

EDIT: I tried to make your work example, and I had success with "chooseFile ()" and passing it "filepath" directly. Perhaps you are trying to send keyboard commands when you really don't need it? Do you have a direct path to the file you are trying to download? Below is what I was able to use to successfully download the 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 it also works

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

or maybe it's

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