Encountering the "No injector found for element argument to getTestability" error while navigating between various single page applications

Currently, I am conducting tests on Protractor for a website that is bootstrapping AngularJS manually. Despite the steps continuing to execute, I encounter this 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.15/ng/test"

Upon visiting the link https://docs.angularjs.org/error/ng/test,

The explanation provided is as follows:

Angular's testability helper, getTestability, requires a root
element to be passed in. This helps differentiate between different
Angular apps on the same page. 
This error is thrown when no injector is found for root element.
It is often because the root element is outside of the ng-app.

This issue arises when transitioning from one Single Page Application (SPA) to another. Interestingly, the website under test does not utilize ng-app anywhere.

Based on my understanding, the root element for ng-app typically is html or body tag.

When utilizing body in my conf.js file, I can successfully run other tests. However, upon switching between SPAs, sometimes the aforementioned error occurs.

Below is an excerpt from my conf.js file:

var customReport  = require('./Utilities/HtmlWriter.js').htmlWriter;

//config dependencies - all the js files  in tests folder ending with -spec.js will be executed
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub', //Selenium webdriver instance needed to run the tsts
  specs: ['./tests/functional/EditAppInfo_spec.js'], // All tests need to be placed inside tests folder and should end with _spec.js

  baseUrl:'http://url.in.test.net',

      capabilities: {
        'browserName': 'firefox',
    },

    /*
     multiCapabilities:[
      {
            'browserName': 'chrome'
       },
        {
            'browserName': 'firefox'
        },       
        {
           'browserName': 'internet explorer',
        }
    ],
    */  

  getPageTimeout:30000,
  allScriptsTimeout:30000,
  rootElement: "body",

  jasmineNodeOpts: {
    onComplete: null,
    isVerbose: true,
    showColors: true,
    includeStackTrace: true,
    defaultTimeoutInterval: 10000000000000
 },

         onPrepare: function() {
    }
};

Do I need to adjust the root element when navigating between different SPAs using spec files?

browser.rootElement

If anyone could provide guidance on this matter, would assigning an ID on top of the div where the SPA loads help resolve the issue?

Answer №1

Encountered a similar issue recently while testing an app. Initially, the body/div class was defined in the conf.js file like this:

rootElement: '.classOfDivUnderBodyOfAnSPA',

However, when moving on to test another app, I faced the same problem. After commenting out the previous line and adding:

rootElement: '.classOfDivUnderBodyOfNewSPA',

The issue was resolved. It's worth noting that specifying which element to focus on (like body) is not necessary; simply having the class value of the div under body is sufficient. Hope this explanation helps!

Update: I also tried combining both div classes by separating them with a comma, and that solution worked as well. There's no need to settle for just one or the other.
rootElement: '.class1, .class2',

Answer №2

After some troubleshooting, I successfully resolved the issue by updating the

`framework: jasmine` 

configuration in my protractor.conf.js file to

`framework: jasmine2`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing me from translating JS Canvas Image?

I've been struggling with using ctx.translate() to translate images on a canvas. No matter what I do, it just won't work. I've spent a good amount of time trying to troubleshoot the issue. Here's the snippet of code I'm working wit ...

Looking to retrieve a specific data element within Vue.js?

Here's a thought-provoking query for you. Imagine I have some data stored in an element in the form of an array like this: data: { product: socks, variants: [ { variantId: 2234, variantColor: 'Green', varian ...

Tips on Modifying JSON Objects with JavaScript

In the code I'm working with, there's a generated line that creates an animated sidebar using a div. The width of this sidebar is controlled by the 'v' parameter, currently set to 85. <div id="sidebar" class="inner-element uib_w_5 ...

Encountered an issue while attempting to load the required module

I'm having trouble setting up Stripe for my app and getting errors when trying to implement the module. Typically, I would require the module at the top of the file in order to use it, but when I do this in the paymentCtrl file, it doesn't work a ...

Incorporating groovy script into HTML: Is it possible, akin to embedding JavaScript

Can groovy script be embedded in HTML similar to JavaScript? I am interested in creating an onclick button event that utilizes groovy script instead of JavaScript. Thank you. ...

AngularJS document object model selector

My custom directives use jQuery for animation effects because I find angular's built-in ngShow/ngHide to be functional but not visually appealing. I vaguely remember reading in the documentation that Angular has its own DOM selector, something like an ...

`Storing text values in a Variable after trimming them for temporary use`

Looking to extract a variable from partial text in a string for use within the same test Spec. The element can be found here: .//*[@id='root']/div[2]/div/div[2]/div/section/div[1]/div[2]/div/h4 When extracted, it will output: "Your booking r ...

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

In order to dynamically add the following element to the DOM during run time, I need assistance... <input type="text" name="imagesToAdd" value="3566"> My initial attempt was to use Selenium JavascriptExecutor for this task. However, I encounter ...

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

These are the functions I have created: function type(message) { document.getElementById("body").innerHTML="<div id=\"textbox\" class=\"textbox\"></div><div id=\"oc\&q ...

Detect changes in class properties using Node.js

Is it feasible to establish direct proxy watchers for class properties in Node.js? class User{ constructor(name){ this.name = name; let pObject = new Proxy(this,{ set: () => { console.log("something cha ...

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

Having trouble importing Sequelize in Angular?

I'm encountering an issue in my app where I am unable to import the sequelize package. The error message reads: chunk {main} main.js, main.js.map (main) 2.02 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 691 b ...

The division element nested within a select tag

HTML: <div class="row"> <div class="form-group"> <div class="col-xs-10"> <label for="class_code_reservation">Class Code</label> <select type="text" class="form-control" id="class_code_reservation" na ...

Utilizing a try/catch block for validating a JSON file is ineffective

I'm attempting to verify if a received string is JSON and I experimented with the code below: try { JSON.parse(-10); // Also tried with "-10" }catch(e) { console.log('inside catch'); } Surprisingly, the code never enters the catch ...

Struggling to bring in { useActionState } from 'react' while trying to follow the latest next.js tutorial with next.js v15.0.0-canary.28, react v19.0.0-rc, and types/react v18.2.21

Currently, I am following the tutorial on next.js available at https://nextjs.org/learn/dashboard-app I have reached chapter 14, which focuses on enhancing accessibility, located at https://nextjs.org/learn/dashboard-app/improving-accessibility During on ...

Encountering an issue when passing a response using coverage.js

I am utilizing coverage.js to showcase data. When I pass my variable containing the coverage response into an HTML file, similar to how it's done in Angular to display expressions, I encounter a syntax error: <div class="container" style="margin- ...

Leveraging the ng-change directive for enhancing search functionality

Query Request : $scope.viewAccount = function(){ var dataJson = { "json": { "request": { "servicetype": "60", "functiontype": "1014", "data": { "shortname": $scope.model.selectShortName, "groupzname": ...

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

Using Angular 8, remember to not only create a model but also to properly set it

hello Here is a sample of the model I am working with: export interface SiteSetting { postSetting: PostSetting; } export interface PostSetting { showDataRecordAfterSomeDay: number; } I am trying to populate this model in a component and set it ...

"Encountering an error stating "breakpoint set but not yet bound" while debugging a node.js application

After following the instructions in this link to configure Visual Studio code for debugging nodejs and chrome(vuejs) applications, I encountered an error message saying "Failed to exec debug script" when attempting to debug "Meteor All" in Visual Studio co ...