Handling file uploads on hidden input

There is a known issue with file upload input has CSS display=none.

This causing WebUI.uploadFile… to fail.

There are 3 common solutions for handling this scenario.

  1. Implement WebDriver methods.

    • Tried this same issue as when using WebUI.uploadFile
  2. Overwrite CSS at runtime with JavaScriptExecutor to “display=block”.

    • Tried this and application under test crashed with “unexpected error” message
  3. Handle Modal upload windows with Java Robot.

    • Worked great, but when executing from Jenkins there is no visible browser running. Therefore it modal window wasn’t executed.

What can you recommend?

Also, is it possible to see the browser session when running scripts from command line?

Thanks!

The provided solution worked. Having visible browser allowed us to debug scripts against CI environment.

There were environment configuration differences between developer and CI machines.

This also solved the issue with overwriting CSS at run time. Therefore, both CSS overwrite and Java Robot are valid alternative solutions for handling hidden file upload input .

CSS Overwrite:

WebDriver driver = DriverFactory.getWebDriver();

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById('chooseFile0').style.display='inline-block'");
WebUI.uploadFile(findTestObject('input_FrontImage'), path+imagePath)
js.executeScript("document.getElementById('chooseFile0').style.display='none'");

Java Robot:

StringSelection s = new StringSelection(filePath);
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(s, null);
Robot robot = new Robot();
robot.keyPress(java.awt.event.KeyEvent.VK_CONTROL);
robot.keyPress(java.awt.event.KeyEvent.VK_V);
Thread.sleep(1000);
robot.keyPress(java.awt.event.KeyEvent.VK_ENTER);

1 Like

For the third solution using Java Robot and you are having issues with Jenkins, you should prefer to the solution provided from this page. Said in another way

I Tried using Java Robot but the flow gets stuck at the point where the file has to be chosen at the Folder structure.
My file location is at say: /Users/xxxx/Documents/Katalon\ Studio/xxxx/Include/testFiles/img.png
The control is lost after going to : /Users/xxxx
How can i perform further operation? Please help