loading...
Cover image for WebdriverIO - Upload File Example

WebdriverIO - Upload File Example

automationbro profile image Automation Bro ・1 min read

During browser automation, you might run into a scenario where you need to upload a test file, this is really easy to do with WebdriverIO. Let's take a look at an example below.

I'm using this test url for this example which is stored in the wdio.conf.js file.

const path = require('path');

describe('Upload File', () => {
  it('should be able to upload a file', () => {
    // find selectors
    const input = $('#file-upload');
    const submitBtn = $('#file-submit');

    // store test file path
    const filePath = path.join(__dirname, '../data/chrome.png');

    // use browser.uploadFile to upload the test file
    const remoteFilePath = browser.uploadFile(filePath);

    // access the test page
    browser.url('/upload');

    // set file path value in the input field
    input.setValue(remoteFilePath);
    submitBtn.click(); // click the submit button

    // Add your assertion here
  });
});

💎 This code is also available on GitHub for you to access and play around with.


You can also checkout the video below that will show you the detailed explanation of the code above.


To learn more about WebdriverIO, you can check out my free tutorial series here -

https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

Posted on by:

automationbro profile

Automation Bro

@automationbro

I enjoy discussing topics related to Test Automation | Quality Assurance | Web Dev. Check out my Youtube channel @AutomationBro.

Discussion

markdown guide
 

Hey. I think it is worth mentioning that the input element needs to be accesible. Modern websites hide the input box and instead show a nice html wrapper. There are many times where you need to use javascript to modify the element css attributes to make it visible.

Great post. keep them coming.

 

Hi Pablo, I agree, that's a good point. In some cases, the input element is hidden and is not easily accessible. I guess I should do a quick post on that too :)

Thanks for your feedback!

 

Great and concise example!