Having problem in file upload using selenium

Question

I am learning to automate procress in a website. I chose http://logos.iti.gr/logos/ as a website to automate. I am facing a problem when uploading the image file using the upload an image button because this button when clicked seems to convert into a text field.

The other tutorials I followed get the id of the text field and use sendkeys to send the path because they do have separate text field and upload button key.

Here is the code that I tried :

 driver.get("http://logos.iti.gr/logos/");
 driver.findElement(By.id("fileToUpload")).clear();
 System.out.println("Cleared"); 
 driver.findElement(By.id("fileToUpload")).sendKeys("/home/test.jpg");

I don't know what the problem is. It just get IPDL protocol error: Handler returned error code!

org.openqa.selenium.ElementNotInteractableException: Element <input id="fileToUpload" class="input_file" name="fileToUpload" type="file"> could not be scrolled into view
Build info: version: '3.141.5', revision: 'd54ebd709a', time: '2018-11-06T11:42:16'

• Timothy T.: Are you using the geckodriver? i.e. the test is launching a Firefox browser.
• nzy: @TimothyT. yeah I am using geckodriver and FireFox browser
• Mohamed Anees A: Can you help us with your firefox version?
• nzy: @MohamedAneesA My firefox version is 62.0.3 (64-bit).
• nzy: @MohamedAneesA I added more description of the error.

Answer 1

You get ElementNotInteractableException - it is thrown to indicate that although an element is present on the DOM, it is not in a state that can be interacted with. In your case it happens because the element has style display:none. Basically, selenium (and real users as well) can't interact with non-visible elements. You need to make element visible at the frist place and then continue.

 driver.get("http://logos.iti.gr/logos/");
 WebElement el = driver.findElement(By.id("fileToUpload"));
 System.out.println("Making element visible"); 
 ((JavascriptExecutor)driver).executeScript("arguments[0].style.display = 'block';", el);
 el.clear();
 System.out.println("Cleared"); 
 el.sendKeys("/home/test.jpg");

By the way here is the default element style (you can see it in browser dev tools). Pay attention to display:none. When you change the value to block don't be confused that you actually don't see any changes on a screen because element's width and height are very small.

.input_file {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 display: none;
}

Answer 2

Try updating your client and Firefox. Hopefully that should solve this issue.

I have never faced any issue with file uploads until the webpage mandates the dialog box while clicking the image upload. I am using latest version of ChromeDriver and Chrome.

If possible, you too switch to ChromeDriver since I find the pair working seamlessly together in my experience! :)

• nzy: I already have the latest version of firefox and selenium. I still have not solved it. I did not get any luck with the chrome too. I think its something to do with how the button changed to the text box but I couldn't figure out how to automate this.