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

Question

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.

Try to check whether this model is displayed. Sometimes model doesn't loaded. element(by.model('task.desTask')).isDisplayed().then(function(isPresent){ if(isPresent){ element(by.model('task.desTask')).click(); } }); — Anil Kumar
Check whether there is need to switch the frame before looking for the element. — Madhan
Excuse me, can you please carify? I've written some e2e tests for some other projects and I never had to "change" the switch I'm looking in order to find an element. I just had to use a locator. — MWS
Anil Kumar: The element is displayed, I can see it. If I enter your code, it still fails saying it can't locate task.desTask model. demouser123: if by second model you're referring to task, task is a model inside the directive scope, wich is loaded in the main html: <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> This snippet generates the first snippet I posted. — MWS

MWS MWS · Accepted Answer · 2018-07-02T10:17:04

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.

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

1 Answers