AngularJS e2e tests with Protractor: can't test elements inserted with ng-include

2
votes

i'm testing an AngularJS app with Protractor. But i'm having some problems testing code that is inserted with ng-include.

I get this error "Error: No element found using locator: By.id" when i try to find an element that was inserted with ng-include.

If i run protractor in debug mode and inspect the page after the ng-include is done, i find this in the html "<--ng-include-->" instead of the element it was supposed to be there.

I was using Karma to do the tests but could't test if the elements was there. Then i read some documentation and it said that Protractor was more appropriate for this, but it seams i'm having the same problem.

app.js

 $scope.setNewWindow = function () { 
       var elem = $compile('<div ng-controller="myCtrl" class="windows-frame" id="window' + windowID + '">' +
                           '<div ng-include src="\'includes/elemToInclude.html\'"></div>' +
'</div>')($scope);

$("#main").append(elem);}

test.js

it('test', function() {

    browser.executeScript("var scope = angular.element( document.querySelectorAll('#main')[0] ).scope();" +
        "scope.setNewWindow()");

    element(by.id('include_element_id')).click();
});
1
angularjsjasmineprotractorangularjs-ng-include

1 Answers

0
votes

You shouldn't use the browser.executeScript, it is not made by protractor therefore not synchronized with Angular.

You'd rather use Protractor built-in methods to make the element visible.Do like your users would do on your website, click on a link or a button for instance.

By the way you should append an element with jQuery just like that, do that in a directive to avoid synchronization issue.