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

Community
  • 1
  • 1
Greg Dougherty
  • 3,281
  • 8
  • 35
  • 58

5 Answers5

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.

Ashok M A
  • 478
  • 6
  • 14
jgiralt
  • 690
  • 6
  • 9
  • In My case ng-app is in html, 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 '16 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. – rohitkadam19 Aug 30 '16 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

Greg Dougherty
  • 3,281
  • 8
  • 35
  • 58
  • 11
    It will work if you set rootElement: "[ng-app]" in your protractor.config.js – Yan Yankowski Jan 28 '15 at 11:30
  • 4
    Note, however, that putting ng-app on the tag WILL work. – JESii Jul 31 '15 at 04:54
  • while having ` or ` 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 09 '16 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']
}
randominstanceOfLivingThing
  • 16,873
  • 13
  • 49
  • 72
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.

RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
  • 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 '15 at 14:58
  • Is it possible to shared the code snippet? So ,I get better idea of your problem. – RIYAJ KHAN May 20 '15 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 '15 at 04: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.

sean helvey
  • 27
  • 4