protractor cannot find element

Question

I'm using plupload to be able to upload files cross browser. My html looks like so

<div id="fileInputs">
 <div id="html5_18fclrb4o1jgqiufhe6hpghk28_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 120px; height: 33px; overflow: hidden; z-index: 0;">
  <input id="html5_18fclrb4o1jgqiufhe6hpghk28" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="">
 </div>
</div>

All of the inline styles are generated on the fly as well as the input type file element by moxi and plupload. I can't reference by id because the id to gets generated on the fly and is always different. My test is basically trying to find this input and send some keys to upload a file

var container = element(by.css('.moxie-shim'));
container.find('input').then(function(input){
  input.getInnerHtml().then(function(inner){
    console.log(inner);
   });
  input.sendKeys('/Users/me/Desktop/toUpload.pdf');
})

I get the log for the input which confirms that I do actually have the input. But this is the error I keep getting

UnknownError: unknown error: cannot focus element
  (Session info: chrome=32.0.1700.102)
  (Driver info: chromedriver=2.8.241036,platform=Mac OS X 10.9.1 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 36 milliseconds
Build info: version: '2.39.0', revision: 'ff23eac', time: '2013-12-16 16:11:15'
System info: host: 'climboid.local', ip: '10.0.0.3', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9.1', java.version: '1.6.0_65'
Session ID: d11f5fe29cf2bb6944820646594d7b24
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, chrome={userDataDir=/var/folders/1s/cnypppy93gz6d0tvwbfc2f7h0000gn/T/.org.chromium.Chromium.QcT29B}, rotatable=false, locationContextEnabled=true, version=32.0.1700.102, takesHeapSnapshot=true, cssSelectorsEnabled=true, databaseEnabled=false, handlesAlerts=true, browserConnectionEnabled=false, nativeEvents=true, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}]

Any help is much appreciated. thanks!

Answer 1

I think how you are trying to obtain the element is causing this issue. Try the below:

var input = $("input[type='file']")
input.sendKeys('/Users/me/Desktop/toUpload.pdf');

or if you need to use container for some reason:

var input = $('.moxie-shim').findElement(by.tagName('input'))
input.sendKeys('/Users/me/Desktop/toUpload.pdf');

Note that $ is an alias for findElement by css