Automate file upload in AngularJS via Selenium

Question

I am using Powershell to drive .NET Selenium and a FirefoxDriver to automate some stuff. Part of that is file uploads and the website happens to written (at least partly) with AngularJS.

Now I have figured out how to do automate the file upload with a normal input element. Just send the file path via SendKeys.

But I can't figure it out for this situation. The HTML for the file drop area with optional manual file selector is as follows:

<div class="overflowHidden video-drop-zone file-drop-zone zone appversionicon rounded" ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true"> <div class="simpleDropZoneFileSelect"> <span class="selectFileText"> <span class="ng-binding ng-hide" ng-show="dropLabel !== undefined &amp;&amp; dropLabel !== ''"><br></span> <a class="ng-binding" href="" ng-show="true">Select file</a> <input class="" ng-show="true" ng-file-select="onFileSelect($files)" type="file"> </span> </div> </div> 

I hope I haven't simplified this too much. And there surely is more to the whole AngularJS setup than that. But maybe it is enough for you to give me some pointers as to where to look next or how to approach this. If not, just let me know and I'll add more info.

I have found that Protractor seems to be the way to go when doing AngularJS testing, but it would alter my setup considerably (with a NodeJS server etc.) and all I need right now is this file upload.

Thanks!

Sandro

Answer 1

Not sure how your entire set up looks like. But file upload is much easier in selenium.

Driver.FindElement(By.CssSelector("input[type='files']")).SendKeys("FilePath") 

should do it

Answer 2

<button class="btn btn-primary ng-scope" ng-click="vm.importAccountsClicked()" translate="import-accounts">Import Accounts</button> <input class="hide" type="file" id="fileItem" accept=".csv" onchange="angular.element(this).scope().import()"> 

I encountered a similar issue using Webdriver and Java. Looking at a webpage with the Import Accounts button (html snippet above), I could not get Selenium+Java to sendKey to it. The mistake that I did was I was not using the type=file attribute to recognize the element. Instead I was using the text of the button:

@FindBy (xpath="(//button[.='Import Accounts'])") private WebElement importbutton; 

So after I changed the importbutton variable declaration to

@FindBy (id = "fileItem") private WebElement importbutton; 

the issue is resolved by using sendKeys() method.

importbutton.sendKeys(filepath); 

Hope this helps.