Upload file on a hidden input field - WebdriverIO

I created a post last week showing you how to upload a file in WebdriverIO.
However, one thing I didn't cover is how to upload a file when the input element is hidden which is the case in most modern websites. (Thanks to @pjcalvo for pointing that out).

Let's take a look at an example of how we can address that. I'm using online2pdf as our test site for this example.

Note: for this test site, the parent div containing the input was hidden so in order to make it interactable I had to make it visible for WebdriverIO by using browser.execute command (see code below).

const path = require('path');

describe('Upload File Hidden Input', () => {
  it('should be able to upload a file on hidden input', () => {
    // find your selectors
    const inputDiv = $('#div_file_box0');
    const input = $('#input_file0');
    const submitBtn = $('.convert_button');

    // 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('https://online2pdf.com/');

    // change display to block from none for the hidden div
    browser.execute(function () {
      document.getElementById('div_file_box0').style.display = 'block';
    });

    // wait for div to be displayed
    inputDiv.waitForDisplayed();

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

    // temporary pause to see if the file got upload successfully
    browser.pause(5000);

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

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

---

Check out this video to see a detailed explanation of the code above:

---

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

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