WebdriverIO — Upload file on a hidden input

Image for post
Image for post
https://www.youtube.com/watch?v=2hcfNWobjdM

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.

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.

https://www.youtube.com/watch?v=2hcfNWobjdM

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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store