Currently, I am testing Protractor with a small AngularJS application.
Here is the test scenario:
describe('Testing Protractor', function() {
var draftList;
it('should count the number of drafts', function() {
browser.get('#/');
draftList = element.all(by.repeater('newsletter in drafts'));
expect(draftList.count()).toEqual(2);
});
});
Controller:
angular.module('myApp.controllers', []).
controller('DraftsCtrl', ['$scope', 'Draft', function($scope, Draft) {
$scope.drafts = Draft.query();
}])
Draft service:
angular.module('myApp.services', ['ngResource']).
factory('Draft', ['$resource',
function($resource) {
return $resource('api/drafts/:id')
}])
When executing this test using Protractor, an error occurs:
Error: Timed out waiting for Protractor to synchronize with the page after 11 seconds
However, changing this line in the controller from:
$scope.drafts = Draft.query();
to:
$scope.drafts = [];
The test fails as expected, but importantly, it no longer times out.
With query() active, data returned by the API displays correctly when viewing the app manually in a browser and through Protractor's browser window.
Why does Protractor struggle to synchronize with the page when the service communicates with the API?
The AngularJS version being used is v1.2.0-rc3, and Protractor is at v0.12.0.