I\'m trying to run this tutorial against my own AngularJS code. I can\'t get past the first test. Any attempt to pull any information from my page gets this error:
I have my angular bootstrapping code as below:
var appName = "testApp";
var appContainer = document.getElementById('app-container');
angular.bootstrap(appContainer, [appName]);
I got the same error that you got and with the advice that I took from @jgiralt, here is my conf.js of protractor that fixed this error:
// conf.js
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
rootElement: '#app-container',
specs: ['spec.js']
}
You may have an unrelated angular injector error that is causing this output from protractor. Try clearing your terminal, running protractor again, and looking at the first error which is displayed above the verbose protractor output. If it is an angular injector error, you can fix it by simply adding a script tag to your index.html.
Terminal output:
Error: [$injector:modulerr] Failed to instantiate module app.components.slider
Can be fixed by adding the following to index.html:
<script src="app/components/sliders/slider.component.js"></script>
This works because the module app.components.slider
is defined in the file app/components/sliders/slider.component.js
. It may have been accidentally removed from your index.html file during a merge/rebase or never added in the first place.
Like the accepted answer implies, the problem lies in letting protractor know what's the root of your app, this is where ng-app is defined. By default this is expected to be the tag but your code seems to have it somewhere else. Nevertheless you can actually change that behavior in the config file.
From the Protractor reference config file:
// CSS Selector for the element housing the angular app - this defaults to // body, but is necessary if ng-app is on a descendant of <body>. rootElement: 'body',
For example, if your ng-app is within a div like this:
<div id="my-app" ng-app=myAppManager">
You could use
rootElement: '#my-app'
Since it's a CSS selector, you could also use the square brackets syntax to select by attribute, like this:
rootElement: '[ng-app]'
This would select the element that contains the attribute ng-app, no matter which one it is.
I faced the same issue while doing E2E testing with jasmine and protractor.
This is related to root html tag.
While runnnig the protractor,I was getting the error..
"Error while waiting for Protractor to sync with the page: " [ng: test] no injector found
for element argument to getTestability\ nhttp: //errors.angularjs.org/1.3.13/ng/test"
For resolving this, I made one small change in root html tag by putting lang="en" attribute. This resolved my problem.
Final HTML
<!DOCTYPE html>
<html lang="en" ng-app="test">
.....
</html>
I hope this will help you.
Thanks.
The answer is that you must have <html ng-app>
or <html ng-app = "">
at the top of your html page in order to use Protractor.
Having an app as part of a <div ng-app = "">
, for example, will not work