angularjsprotractorangularjs-e2e

Protractor: by.model can't find element inside custom directive

I have this AngularJS project where I have a complex HTML layout.

<div id="ngView" class="container-fluid">
    <input type="text" ng-model="model.test"></input>
    <div ng-view></div>
    <br><br>
</div>

model.test is successfully found by element(by.model('model.test')).

Inside the ng-view, I load different components. One of those components, loads another html directive, this one: 

<div class="trans-edit" ng-if="$root.editing"> 
    <edit-task task="$root.task " editando="$root.editing " 
     reload="$root.getData" class="trans-edit">
    </edit-task> 
</div>

The outcome of which is:

<edit-task task="$root.task " editing="$root.editing " reload="$root.getData" class="trans-edit ng-isolate-scope">
<div class="modal-header">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <h3 class="modal-title ng-binding">Create task</h3>
        </div>
        <div class="col-md-6 col-xs-12">
            <input type="text" ng-model="task.desTask" class="form-control input-lg ng-pristine ng-untouched ng-valid">
        </div>
        ... it goes on .... </div>

I can't make the element(by.model('task.desTask')) work, even after waiting for angular or setting a wait time. Protractor always fails by:

Failed: No element found using locator: by.model("task.desTask").

I'm a newbie still learning e2e testing, but this is the first test in a very long testing process that has failed, and I fail to find info on the matter of directives and protractor.

I've tried adding an id to an element inside the custom directive, and it can't be found. Seems like the system is blind to everything under the custom HTML tag <edit-task></edit-task>.

Any help would be great, using by.model would be crucial for this project.

Solution

  • Turns out an angularjs error on the project made the directive not render correctly, thus element(by.model()) wouldn't work. Thanks everyone for the help.