Selenium file upload not functioning with hidden input element in headless browser

Other Questions Headless Browser
1

I’m utilizing selenium webdriver with a headless browser and encountering problems while uploading files. The file input element is not visible in the HTML source code. It works perfectly on a standard Firefox browser, as I can make the hidden field visible through JavaScript and upload files without issues. Unfortunately, it does not function the same way in headless mode.

Here’s the HTML element I’m working with:

<input id="CASE_file_select" class="required" type="file" multiple="" size="25" name="CASE_file" style="display: none;"/>

Here’s what I’m currently doing:

JavascriptExecutor executor = (JavascriptExecutor)oDriver;
executor.executeScript("document.getElementById('CASE_file_select').style.display='block';");

oGeneric.sleepTimer(5);
Utility.constant.objLogs.writeLog("After running JavaScript");

WebElement fileInput = oDriver.findElement(By.xpath("//input[@id='CASE_file_select']"));
oGeneric.sleepTimer(5);
Utility.constant.objLogs.writeLog("After locating hidden file input");

try {
    fileInput.sendKeys(sfilepath);
    oGeneric.sleepTimer(8);
} catch (Exception e) {
    Utility.constant.objLogs.writeLog("File upload attempt failed");
}

Utility.constant.objLogs.writeLog("File upload attempt completed");

The validation step I have afterward:

if(oDriver.findElement(By.xpath(".//*[@id='0_CASE_fileDiv']")).isDisplayed()){
    Utility.constant.objLogs.writeLog("File uploaded successfully");
} else {
    Utility.constant.objLogs.writeLog("File upload failed");
}

Utility.constant.objLogs.writeLog("After file selection check");

String submitButtonXpath = (String) constant.hashXPaths.get("btnUploadCaseRelatedFile");
WebElement uploadButton = FindElement(oDriver, submitButtonXpath);
Utility.constant.objLogs.writeLog("After locating upload button");
uploadButton.click();
oGeneric.sleepTimer(10);
Utility.constant.objLogs.writeLog("After clicking the upload button");

The script fails during the validation step because the file is not selected in headless mode. Is there a workaround for handling file upload elements that are hidden while working in a headless browser?

2

I’ve hit this same issue with headless browsers and hidden file inputs. Headless mode is pickier about element interaction than regular mode. Don’t bother with the display property - instead, set opacity and dimensions to make it interactable while keeping it technically visible. Try this: executor.executeScript("var elem = document.getElementById('CASE_file_select'); elem.style.opacity='1'; elem.style.position='absolute'; elem.style.left='0px'; elem.style.top='0px'; elem.style.width='100px'; elem.style.height='20px';"); before sending keys. This fixed my file upload problems in headless Chrome where the element had to be truly interactable, not just visible.

3

Had this exact headless file upload nightmare six months ago. Headless browsers are way more strict about element interaction security. Tried tons of JavaScript workarounds that kept failing randomly. Here’s what actually works reliably - make the input element truly interactive, not just visible. Use executor.executeScript("document.getElementById('CASE_file_select').style.cssText = 'position:absolute;left:0;top:0;width:1px;height:1px;opacity:0.01;z-index:1000;';"); This makes it technically visible and interactable for the browser engine while staying invisible to users. Unlike display:block, this keeps the element’s ability to receive focus and interact with the file system in headless mode. Works consistently across different headless browsers.

4

Skip the JavaScript workarounds and element manipulation. Headless browsers handle file uploads differently and these visibility hacks don’t work reliably.

I hit this exact problem last month when our QA team kept getting stuck with file uploads in headless mode. The real issue isn’t element visibility - you’re fighting the browser’s security restrictions.

Ditch Selenium’s limitations and automate the file upload through the API instead. Most web apps have endpoints that handle file uploads directly. Intercept the network requests to find the actual upload endpoint, then send your files there programmatically.

This is faster, more reliable, and works regardless of headless mode or hidden elements. Set up the automation to handle authentication, form data, and file transmission in one workflow.

Latenode makes this API automation really simple. You can build workflows that handle file uploads through direct HTTP requests, bypassing all the browser quirks.

Check it out: https://latenode.com

5

try completely removing the display none style instead of changing it to block. headless mode can be picky with css changes. use executor.executeScript("document.getElementById('CASE_file_select').removeAttribute('style');"); then send keys directly without extra waits.

6

Headless mode can be tricky with file uploads! Skip the visibility styling and set the file path directly with JavaScript before using sendKeys. Try executor.executeScript("document.getElementById('CASE_file_select').files = arguments[0];", filepath); then manually trigger the change event. Headless browsers often need you to set the file object programmatically first.