How to interact with hidden elements with Protractor

The other day I was trying to interact with a hidden file input field:


<div class="col-sm-3">
  <input class="btn btn-default" class="hidden" accept=".csv"  id="geofence_file_input">
  <a class="btn btn-default" id="textbox-for-geofencefile">Select File</a>
  <span ng-if="LineItemForm.augmentations.geofence.file">{{selectedFilename()}}</span>
</div>

And the CSS:


.hidden {
  display: none;
}

Which caused this problem:

Failed: Wait timed out after 100015ms

Workarounds include displaying it, interacting with it, hiding it again, which I didn’t like.

I changed it to be like this, more protractor-friendly:


<div class="col-sm-3">
  <input class="btn btn-default" style="opacity:0;height:0px;" accept=".csv"  id="geofence_file_input" type="file">
  <a class="btn btn-default" id="textbox-for-geofencefile" ng-click="selectFile(this)">Select File</a>
  <span ng-if="LineItemForm.augmentations.geofence.file">{{selectedFilename()}}</span>
</div>

Or with CSS:


#geofence_file_input {
  opacity:0;
  height:0px;
}

Now it works and the tests do too.