How can I set a path for a file to upload if an <input> element is not visible and only reference by an anchor tag <a>?

Question

With WebDriver if the element is of type="file" I can usually just to a .sendKeys() directly to the element and it works beautifully.

Unfortunately the situation I have now there is a custom button used that has an anchor tag referring to the input element:

//anchor tag which is a custom button referring to non visible file input element
    <a id="image-upload-button" class="control_button button" href="#/create_channel/addImage" data-ember-action="151">

//refers to this file input element which is not visible
    <input id="image-selector-button" name="image-selector" type="file" class="selectImageBtn" {{action "selectImage" on="change" target="view"}} {{action "onBlur" on="blur" target="App.router.imageSelectorView"}} {{action "onFocus" on="focus" target="view"}}/>

In this case sendKeys() does not work on the anchor tag:

driver.findElement(By.id("image-upload-button ")).sendKeys(“c:\\myFile.bmp”);

Error: org.openqa.selenium.WebDriverException: focusElement execution failed; Failed to send keys because cannot focus element

Nor does sendKeys() work the non-visible file input element:

driver.findElement(By.id("image-selector-button ")).sendKeys(“c:\\myFile.bmp”);

Error: org.openqa.selenium.ElementNotVisibleException: Element must be displayed to click

I've tried injecting javaScript to set the path value on the non-visible input element a few different ways (see below), but nothing seems to work. Any ideas on how I can set this path?

//nothing happens when I try this

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript("window.document.getElementById('image-selector-button').setAttribute('value','C:\\MyFile.jpg');");  



//I tried firing a change even first as well and that didn't appear to do anything either

js.executeScript(
"var el=document.getElementById('image-selector-button'); " +
" function fire(evttype) { " +
" if (document.createEvent) { " +
" var evt = document.createEvent('HTMLEvents'); " +
" evt.initEvent( evttype, false, false); "+
" el.dispatchEvent(evt); " +
" } else if (document.createEventObject) { "+
"  el.fireEvent('on' + evttype); " +
" }    }; " +
" fire(el,'change'); " );

Any help or suggestions would be greatly appreciated!

Answer 1

Try displaying the control first, then set the value, then hide it again:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById('image-selector-button').style.display = 'block';");
driver.findElement(By.id("image-selector-button ")).sendKeys("c:\\myFile.bmp");
js.executeScript("document.getElementById('image-selector-button').style.display = 'none';");