What is preventing Protractor from detecting Angular on a site that has been automatically initialized with Angular?

Whenever I try to utilize browser.get() in my code, I encounter the following error:

Error: Angular could not be found on the page http://localhost:5000/#/login
debug=timing&saveLogs=true&displayAll=true : angular never provided resumeBootstrap

As a workaround, I can use browser.driver.get(), but this leads to issues where I have to manually add specific waits and deal with unreliable tests.

I've done some research on this problem, but so far no solution seems to work. Here are some additional details to consider:

  • The login page is within an Angular application.
  • ng-app is specified in the <html> tag (despite Protractor defaulting to <body>, I have attempted setting rootElement to html without success)
  • The app utilizes $timeout, however replacing every occurrence of $timeout with $interval did not resolve the issue
  • directConnect: true with chromeDriver is being used, which should ideally not cause any problems
  • The versions of Angular and Protractor being utilized are Angular 1.2.28 and Protractor 2.0 respectively

Here is the complete error message for reference:

Using ChromeDriver directly...
[launcher] Running 1 instances of WebDriver
Error: Angular could not be found on the page http://localhost:5000/#/login?debug=timing&saveLogs=true&displayAll=true : angular never provided resumeBootstrap
  at /Users/brandenbyers/Projects/admin-ui/node_modules/grunt-protractor-runner/node_modules/protractor/lib/protractor.js:479:17
  at [object Object].promise.ControlFlow.runInFrame_ (/Users/brandenbyers/Projects/admin-ui/node_modules/grunt-protractor-runner/node_modules/protractor/node_modules/selenium-webdriver/lib/webdriver/promise.js:1877:20)
   .
   . (repeated error lines omitted here for brevity) 
   .
From: Task: WebDriver.manage().timeouts().setScriptTimeout(11000)
  at [object Object].webdriver.WebDriver.schedule (/Users/brandenbyers/Projects/admin-ui/node_modules/grunt-protractor-runner/node_modules/protractor/node_modules/selenium-webdriver/lib/webdriver/webdriver.js:360:15)
  at [object Object].webdriver.WebDriver.Timeouts.setScriptTimeout (/Users/brandenbyers/Projects/admin-ui/node_modules/grunt-protractor-runner/node_modules/protractor/node_modules/selenium-webdriver/lib/webdriver/webdriver.js:1367:23)
    . 
    . (more callback function errors shown above)
   .
javascriptangularjsprotractor

Answer №1

The problem was that Protractor was looking for the standard window.name:

window.name = "NG_DEFER_BOOTSTRAP!"

However, the application I am testing does not follow this standard. As a result, the Protractor testForAngular function fails every time. You can find the Protractor code at: https://github.com/angular/protractor/blob/8a3412e98614bb69978869b34b5b7243619f015d/lib/clientsidescripts.js#L550-L583

One temporary solution is to comment out the customized window.name = in app.js to resolve this issue. However, we still need to explore options for either using a different variable with Protractor or dynamically commenting out this line only for tests.

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

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

javascriptcssreactjsstyled-components

In Angular, link a freshly loaded ".js" controller to a newly loaded "html" view following the bootstrapping process on ngRoutes

As a newcomer to Angular, I have been experimenting with loading dynamic views using ngRoutes (which is very cool) along with their respective .js controllers for added functionality. However, I am encountering difficulties in binding them together after b ...

javascriptangularjsasynchronouspartial-views

Refreshing Bootstrap-Vue Table does not result in updating the table with table.refresh() method

I am facing an issue with a table that is supposed to be updating its data dynamically. The scenario is such that when a button is clicked in the parent component, a server call is triggered and a JSON file is loaded into a child component (the table) via ...

javascriptvue.jsbootstrap-vue

Reloading a page in Vue-Router after submitting a form

Learning Vue by creating a movie searcher has been quite challenging. The issue I'm facing is that I'm using the same component for different routes with path params to fetch specific information. However, when I submit a form with a query for t ...

javascriptvue.jsvuexvue-router

Replace Euro symbols in JavaScript Regexp with grouping

Need assistance creating a Regex pattern for &#8203; € 14,50. After the replacement is completed, only 14,50 Can anyone provide guidance? ...

javascriptregexreplaceregex-lookaroundsregex-group

Is it possible to constantly retrieve data at one-second intervals in NextJS using getServerSideProps?

Is there a way to continuously fetch API data in NextJS using SSR (getServerSideProps) every second? This would involve the client making a request to the server every one second to receive the most up-to-date API data. Any suggestions? export const getS ...

javascriptreactjsnext.jsgetfetch-api

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

javascriptcssreactjs

What is the process for transferring an image from a cloud function request to the vision API?

Just set up a Google Cloud Function with an HTTP endpoint. I want to pass an image to this endpoint and have it sent all the way to the Vision API (which is already set up) and then receive the response back. So, in essence: image in POST request -> C ...

javascriptnode.jsgoogle-cloud-platform

Exploring the capabilities of zooming on SVG elements using D3 within an Angular

I want to implement pan/zoom functionality on an SVG element. I came across a tutorial that suggested using d3.js for this purpose, you can find it here Below is the code I have tried: import { Component,AfterViewInit,OnInit } from '@angular/core&a ...

javascriptangulard3.jssvg

Stopping a Bootstrap Modal Closure When Validation Errors are Present

I'm dealing with a bootstrap model within a .NET MVC5 app. Although my client-side validation is functioning properly (using jquery unobtrusive in MVC), I have encountered an issue where the modal keeps closing even when there are errors present. How ...

javascriptjqueryvalidationasp.net-mvc-5bootstrap-modal

The $ionicPopup is not being recognized by the $scope

I am facing an issue with creating a dynamic popup where images change opacity when clicked. It currently works fine outside of a function, but I need to implement it within a function. Below is my controller code: $scope.imgIds = ['0', ...

angularjsscopeionic-frameworkpopup

"The JavaScript code that functions perfectly in the browser console, but fails to execute when running in the actual

I'm encountering an issue with a simple piece of JavaScript code that seems to only work when executed in the browser console: <script> $(".hopscotch-close").click(function () { alert("Hi"); Cookies.set("tourState", "closed" ...

javascriptjqueryjquery-plugins

Can you explain the contrast between 'depict' and 'examine' when using Jest?

I am currently diving into the world of unit testing in Vue.js with Jest. One question that keeps popping up is when to use describe and when to use test ? TodoApp.vue Component : <template> <div> <h1>TodoApp Componenent</h1> ...

javascriptvue.jsunit-testingjestjs

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

javascripthtmlcsscanvas

Is there a way to modify a specific item within a useState Array in Reactjs?

Having a useState hook that stores data in the following structure: const [orderData, setOrderData] = useState({ demoData1: '', demoData2: '', demoData3: '', demoArrayData: [{itemName: '', itemNumber: ...

javascriptreactjsarrayswebnext.js

In my Node.js application using Express and Passport, I encountered an issue where res.locals.users is functioning properly but the data it

I'm currently working on an application using NodeJS, Express, and Passport. However, I've encountered an issue when trying to display user data in the views. While I am able to retrieve the ObjectID of the user from res.locals.user, accessing s ...

javascriptnode.jsexpresspassport.jsejs

Is there a way to retrieve the controller instance linked to a directive within the link function?

Is there a way to retrieve the controller instance connected with a directive within the link function? return { template: template, controller: controller, controllerAs: 'myCtrl', // What is the method for ac ...

javascriptangularjs

The ng-model directive in Angular is effective for handling arrays, however, it may not

The implementation of the ng-model directive seems to be incomplete when dealing with string values in JavaScript. However, by using a list of dictionary objects and looping through them with ng-repeat, this issue is resolved. One reason for this behavior ...

javascriptangularjsmodel-view-controller

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

app.module.ts bootstrap: [AppComponent], declarations: [AppComponent], imports: [ CoreModule, HelloFrameworkModule, ], providers: [{ provide: Logger, useFactory: loggerProviderFunc(1), }] ...

javascriptangulartypescriptdependency-injectionangular5