<<Previous Post << Complete Tutorial>> NextPost>>
WebDriverIO – uploadFile Command
UploadFile Command comes into picture when you want to upload files from your system to any web application where upload functionality lies.
Choosing a file to be uploaded can’t be handled by selenium because choose file pop is native to the operating system, so file location/ local path of the file you want to upload is provided to uploadFile command.
Syntax :- browser.uploadFile(localPath)
Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)
Here is the small exercise where we will try to upload a file from our local disk location on our native operating system and will validate the file upload successful message.
1) Navigate to https://the-internet.herokuapp.com/
2) Scroll down to the file upload link and click on it so that you would be navigated to URL which is specifically meant for performing fileUpload operation.
3) After a successful file upload operation. Validate the File Uploaded! Message.
Practical Demonstration:
Following are the steps to Perform above exercise (i.e., to perform file upload operation and to validate the successful message through uploadFile command of WebDriverIO )
Pre-requisite: Download the project from here (Click here to Download) and Unzip it.
1) Open Visual Studio Code on your system. 
2) Click on File and select Open Folder. Select the project folder on which your workspace is present.
3) Expand ‘test’ from the Explorer, right-click on the displayed ‘specs’ and select ‘New file’ option as shown below :
4) Give any name of the newly created file say ‘uploadFile_command_test.js’ and copy the below-given code into the newly created file as shown below and save the file:
The following is the WebDriverIO sample code for using uploadFile() Command of WebDriverIO to perform fileUpload Operation and then validate file successful upload message on ‘https://the-internet.herokuapp.com/’ web application.
You can understand this code, by reading the comments provided in the below code:
var assert = require('assert');
describe('This Example show usage of uploadFile() command of WebDriverIO',()=> {
it('should be able to successfully upload the File from your Native System ',()=> {
browser.url("https://the-internet.herokuapp.com/");
browser.maximizeWindow();
browser.pause(3000);
let fileUploadLink = $('//a[contains(text(),"File Upload")]');
fileUploadLink.scrollIntoView();
fileUploadLink.click();
browser.pause(3000);
const filePath = "/home/ajay/Downloads/unnamed.png";
const remoteFilePath = browser.uploadFile(filePath);
let fileUpload = $('//input[@id = "file-upload"]');
fileUpload.setValue(remoteFilePath); //this remoteFilePath location would vary as per your native system
$('//input[@id = "file-submit"]').click();
let fileUploadSuccessMessage = $("//h3[contains(text(),'File Uploaded!')]");
assert.equal(fileUploadSuccessMessage.getText(),'File Uploaded!');
});
});
5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly and save it:-
6) Click on Terminal and Open New Terminal.
7) Git Bash Terminal will look like this as below:-
8) Start Selenium Standalone server using the command as given below.
./node_modules./bin/selenium-standalone start
9) Open Another Terminal like we did in step 6 and run below command.
./node_modules./bin/wdio wdio.conf.js
Observe that the ‘uploadFile_command_test.js’ will get executed successfully. The Chrome Browser will launch, then it will open the mentioned URL and upload file present on the remote file path on https://the-internet.herokuapp.com/upload web application and likewise, respective action will be taken by WebDriverIO Automation code.
And also, the result will be displayed as ‘Passed’ in the terminal as shown below:- 
This is how we can take the help of the browser.uploadFile() command of WebDriverIO to perform file upload operation, Likewise, I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles.
Next Steps:
> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)
> Check complete WebDriverIO Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning?
Connect to me on LinkedIn (Click here)
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> NextPost>>
