Uploading files in headless browser during automated testing with Selenium WebDriver

Other Questions Headless Browser
1

I’m trying to automate file uploads in my web app using Selenium WebDriver. The tricky part is that I need this to work in a headless browser environment.

I’ve got a method that uses the Robot class to handle the file selection dialog:

public void selectFile(String filePath) throws Exception {
    ClipboardContent content = new ClipboardContent();
    content.putString(filePath);
    Clipboard.getSystemClipboard().setContent(content);

    KeyboardSimulator sim = new KeyboardSimulator();
    sim.pressEnter();
    sim.pressCtrlV();
    sim.pressEnter();
}

This works fine on my local machine, but it fails when I run it through our CI/CD pipeline, which uses a headless browser.

Does anyone know how to make file uploads work in a headless browser setup? Any suggestions or alternative approaches would be really helpful. Thanks!

2

I’ve dealt with this exact issue before, and it can be quite frustrating. For headless browser file uploads, I found that using the sendKeys() method directly on the file input element works well. Here’s what I did:

  1. Locate the file input element
  2. Use JavascriptExecutor to make the element visible if it’s hidden
  3. Use sendKeys() to set the file path

Something like this:

WebElement fileInput = driver.findElement(By.id(“file-input”));
((JavascriptExecutor) driver).executeScript(“arguments[0].style.display = ‘block’;”, fileInput);
fileInput.sendKeys(“/path/to/file”);

This approach bypasses the need for the Robot class or system dialogs, making it compatible with headless environments. It’s been reliable for me across different CI/CD setups. Hope this helps!

3

hey alexlee, i’ve had luck using the chrome devtools protocol for file uploads in headless mode. it lets u bypass the file dialog completely. basically u use the Page.handleFileChooser method to set the file path programmatically. might be worth checking out if the other solutions dont work for ya

4

I’ve encountered similar challenges with file uploads in headless browsers. One effective solution I’ve implemented is using the HTTP POST method to directly upload files to the server, bypassing the browser’s file input mechanism entirely.

Here’s a brief overview of the approach:

  1. Identify the server endpoint that handles file uploads.
  2. Create a multipart form-data request with the file content.
  3. Send the POST request using an HTTP client library like Apache HttpClient.

This method eliminates the need for browser interaction and works consistently in headless environments. It’s particularly useful for large-scale automated testing scenarios.

Remember to handle authentication and any necessary headers in your request. Also, ensure your test server is configured to accept such direct uploads for testing purposes.