0

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.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
MWS
  • 3
  • 6
  • Is the second model actions triggered by the first one? – demouser123 Jun 29 '18 at 15:18
  • 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 Jul 01 '18 at 05:44
  • 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: `
    ` This snippet generates the first snippet I posted.     – MWS Jul 02 '18 at 06:55
  • Check whether there is need to switch the frame before looking for the element. – Madhan Raj Jul 01 '18 at 14:33
  • 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 Jul 02 '18 at 06:54
  • I am saying that you may be trying to access the element which is inside the `iframe`. If the element you are trying to access is inside an iframe then you must definitely switch the frame. Refer for more : – Madhan Raj Jul 02 '18 at 06:59
  • No sir, I have no iframes going. Unless I am very wrong, for wich I'd apology, an angularjs directive outputting a custom tag doesn't qualify as an iframe. – MWS Jul 02 '18 at 07:05

1 Answers1

0

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.

MWS
  • 3
  • 6