WebdriverIO - Upload File Example

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.

Comments

[Pablo Calvo]

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.

[Dilpreet Johal]

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!

[Ian]

Great and concise example!