16

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:

     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.8/ng/test"
   Stacktrace:
     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.8/ng/test"
    at Error (<anonymous>)
==== async task ====

Protractor.waitForAngular()
==== async task ====
Asynchronous test function: it()

Does anyone have a Protractor tutorial that shows you how to target your own code, rather than someone else's code?

Thank you in advance

2

5 Answers 5

25

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.

2
  • In My case ng-app is in html, <html lang= "en" ng-app="my.website.is.wonderful" class="ng-scope"> what do i need to mention? rootElement:'html' ? and where do i need to mention in config, before starting selenium server(I use "directConnect")?
    – Nick
    May 12, 2016 at 22:22
  • 1
    What if my page don't have "ng-app", should I ask devs to add it in page or is there any workaround? Please suggest. Aug 30, 2016 at 12:47
6

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

3
  • 11
    It will work if you set rootElement: "[ng-app]" in your protractor.config.js Jan 28, 2015 at 11:30
  • 4
    Note, however, that putting ng-app on the <body> tag WILL work.
    – JESii
    Jul 31, 2015 at 4:54
  • while having <html ng-app> or <html ng-app = ""> and we still get the error: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found for element argument to getTestability while testng with protractor what shall we do ?
    – Emna Ayadi
    May 9, 2016 at 12:02
2

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']
}
0

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.

3
  • 1
    I'm facing the exact same problem, but your solution didn't fix it. I'm bootstrapping angular manually though. Did you get any other insights on this?
    – roemer
    May 20, 2015 at 14:58
  • Is it possible to shared the code snippet? So ,I get better idea of your problem.
    – RIYAJ KHAN
    May 20, 2015 at 17:24
  • its realy nothing special about it. I have a div with an id and bootstrap my app on it: angular.bootstrap(document.getElementById("myapp"), ["myapp.module" ]);
    – roemer
    May 21, 2015 at 4:44
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.