I am using text-angular (https://github.com/textAngular/textAngular) in my application as a textbox for writing mails.
While writing tests through C# protractor, I am unable to update the value of textbox. Even though I am able to access the underlying TextArea element but it is read-only, unable to set value using Text, SendKeys() etc.
Below is the code being put in html file
<text-angular id="txtComposeMessage" name="txtComposeMessage" class="youoi-text-angular" ng-model="emailCtrl.model.composeEmailNote"
ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']]"></text-angular>
and here is the rendered output in browser.
<text-angular id="txtComposeMessage" name="txtComposeMessage" class="youoi-text-angular ng-untouched ng-valid ta-root focussed ng-not-empty ng-dirty ng-valid-parse" ng-model="emailCtrl.model.composeEmailNote" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']]" aria-invalid="false" style="">
<div text-angular-toolbar="" name="textAngularToolbar4465315052159009" ta-toolbar="[['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']]" class="ta-toolbar btn-toolbar focussed">
<div class="btn-group">
<button type="button" class="btn btn-default" name="bold" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Bold" unselectable="on">
<i class="fa fa-bold"></i>
</button>
<button type="button" class="btn btn-default" name="italics" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Italic" unselectable="on">
<i class="fa fa-italic"></i></button>
<button type="button" class="btn btn-default" name="underline" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Underline" unselectable="on">
<i class="fa fa-underline"></i>
</button>
<button type="button" class="btn btn-default" name="strikeThrough" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Strikethrough" unselectable="on">
<i class="fa fa-strikethrough"></i>
</button>
<button type="button" class="btn btn-default" name="ul" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Unordered List" unselectable="on">
<i class="fa fa-list-ul"></i>
</button>
<button type="button" class="btn btn-default" name="ol" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Ordered List" unselectable="on">
<i class="fa fa-list-ol"></i>
</button>
<button type="button" class="btn btn-default" name="redo" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Redo" unselectable="on">
<i class="fa fa-repeat"></i>
</button>
<button type="button" class="btn btn-default" name="undo" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Undo" unselectable="on">
<i class="fa fa-undo"></i>
</button>
<button type="button" class="btn btn-default" name="clear" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Clear formatting" unselectable="on">
<i class="fa fa-ban"></i>
</button>
<button type="button" class="btn btn-default active" name="justifyLeft" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Align text left" unselectable="on" style="">
<i class="fa fa-align-left"></i>
</button>
<button type="button" class="btn btn-default" name="justifyCenter" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Center" unselectable="on">
<i class="fa fa-align-center"></i>
</button>
<button type="button" class="btn btn-default" name="justifyRight" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Align text right" unselectable="on">
<i class="fa fa-align-right"></i>
</button>
<button type="button" class="btn btn-default" name="indent" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Increase indent" unselectable="on">
<i class="fa fa-indent"></i>
</button>
<button type="button" class="btn btn-default" name="outdent" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Decrease indent" unselectable="on">
<i class="fa fa-outdent"></i>
</button>
<button type="button" class="btn btn-default" name="h1" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 1" unselectable="on">
H1
</button>
<button type="button" class="btn btn-default" name="h2" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 2" unselectable="on">
H2
</button><button type="button" class="btn btn-default" name="h3" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 3" unselectable="on">
H3
</button>
<button type="button" class="btn btn-default" name="h4" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 4" unselectable="on">
H4
</button>
<button type="button" class="btn btn-default" name="h5" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 5" unselectable="on">
H5
</button>
<button type="button" class="btn btn-default" name="h6" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Heading 6" unselectable="on">
H6
</button>
<button type="button" class="btn btn-default active" name="p" ta-button="ta-button" ng-disabled="isDisabled()" tabindex="-1" ng-click="executeAction()" ng-class="displayActiveToolClass(active)" title="Paragraph" unselectable="on">
P
</button>
</div>
</div>
<div class="ta-scroll-window ta-text ta-editor form-control" ng-hide="showHtml" aria-hidden="false">
<div class="popover fade bottom" style="max-width: none; width: 305px;">
<div class="arrow"></div>
<div class="popover-content"></div>
</div>
<div class="ta-resizer-handle-overlay">
<div class="ta-resizer-handle-background"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-tr"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-bl"></div>
<div class="ta-resizer-handle-corner ta-resizer-handle-corner-br"></div>
<div class="ta-resizer-handle-info"></div>
</div>
<div id="taTextElement4465315052159009" contenteditable="true" ta-bind="ta-bind" ng-model="html" class="ng-valid ta-bind ng-not-empty ng-dirty ng-valid-parse ng-touched" aria-invalid="false" style="">
<p>abcd</p>
</div>
</div>
<textarea id="taHtmlElement4465315052159009" ng-show="showHtml" ta-bind="ta-bind" ng-model="html" class="ng-pristine ng-untouched ng-valid ta-bind ta-html ta-editor form-control ng-hide ng-not-empty" aria-hidden="true" aria-invalid="false">
</textarea>
<input type="hidden" tabindex="-1" style="display: none;" name="txtComposeMessage" value="<p>abcd</p>">
</text-angular>
I am using below code to update value in textarea.
var txtMessage = _accessor.GetElement("txtComposeMessage").FindElement(By.XPath(@".//textarea"));
txtMessage.SendKeys("test message");
Getting below exception while trying to update it.
An exception of type 'OpenQA.Selenium.ElementNotVisibleException' occurred in WebDriver.dll but was not handled in user code
