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.