Issue with Angular detection on the webpage: Protractor and headless chrome unable to locate Angular

Running end-to-end tests on my Angular2 app using Chrome works perfectly fine. However, when attempting to use headless Chrome with additional chromeOptions, it fails to locate the Angular app. I have tried setting directConnect to true and starting the selenium server with webdriver-manager beforehand, but both methods result in the same failure.

The test initially calls browser().get('/');

Here are the versions I am working with:
Node Version: 6.11.0
Protractor Version: 5.2.0
Angular Version: 1.4.4
Browser(s): Chrome Headless
Operating System and Version: Windows 7

This is my protractor.conf.js file:

var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: ["--headless", "--disable-gpu", "--window-size=800,600"]
    }
  },
  directConnect: true,
  baseUrl: 'https://localhost:4200/',
  framework: 'jasmine2',
  useAllAngular2AppRoots: true,
  jasmineNodeOpts: {
    showColors: true,
   defaultTimeoutInterval: 30000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({
      spec: { displayStacktrace: true }
    }));
    jasmine.getEnv().addReporter(new Jasmine2HtmlReporter({
      savePath: './protractor-results/e2e'
    }));
  }
};

Answer №1

You may be encountering the chrome sandbox security error. To resolve this issue, simply include --no-sandbox in your Chrome options within your protractor configuration file. Hopefully, this adjustment will allow it to function properly! :-)

exports.config = {
  allScriptsTimeout: 11000,
  specs: ["./e2e/**/*.e2e-spec.ts"],
  capabilities: {
    browserName: "chrome",
    chromeOptions: {
      binary: process.env.CHROME_BIN,
      args: ['--no-sandbox']
    }
  },

Answer №2

Have you taken a look at this Protractor Issue and this Chrome-Bug here?

Make sure to verify if Angular is present on the page.

Refer to this helpful answer to find out what to check for. Essentially, check if your browser console shows anything when looking for either window.angular.version (AngularJS) or window.getAllAngularRootElements (Angular).

If one of these returns results but your tests are still failing, it may be time to create an issue on GitHub for Protractor.

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

Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a ti ...

The Datatable is displaying the message "The table is currently empty" despite the fact that the rows have been loaded through Angular

My experience with displaying a data table in Angular was frustrating. Even though all the records were present in the table, it kept showing "no data available." Additionally, the search function refused to work as intended. Whenever I tried searching for ...

Refreshing the browser does not load the Angular2 component and instead shows a 404 error

During my exploration of Angular 2, I developed a basic restaurant management application. Now, I am delving into more advanced techniques such as creating an app bundle, minification, and optimizing the application. The authentication component in my app ...

Unable to retrieve notes(data) from API using the user ID

I am trying to retrieve notes data from an API using user_id, but I am encountering difficulties in making the API call. Despite my attempts to log the error, I am unable to fetch the required data. Can someone assist me in identifying what might be miss ...

Navigating Between Pages with Parameters in Ionic 2 (starter app)

I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...

In the Safari browser, an error occurred when trying to locate the variable Tmpo, which is a plain JavaScript class

I created a small Angular application that utilizes a basic JavaScript class located in my assets/js directory. Everything functions flawlessly in my local environment when using ng-serve. However, upon building and deploying the app (ng build --prod), I e ...

Having trouble deserializing the POJO that was sent from an Angular HTTP post request within my Spring Boot POST-mapped function

My application is a coffee shop, and I am trying to send an array of items to my Spring Boot backend. However, Jackson is throwing an exception: Cannot construct instance of `me.andrewq.coffeeshop.menu_items.Menu` (no Creators, like default constructor, e ...

Can someone explain the meaning of this syntax in a TypeScript interface?

Just the other day, I was trying to incorporate the observer pattern into my Angular 4 application and came across this TypeScript code snippet. Unfortunately, I'm not quite sure what it means. Here's the code: module Patterns.Interfaces { ...

Generate an event specifically for weekdays using the angular-calendar tool available at https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

I'm currently setting up events for the calendar using . According to the guidelines, events are structured like this : events: CalendarEvent[] = [ { start: subDays(startOfDay(new Date()), 1), end: addDays(new Date(), 1), title ...

Utilizing PrimeNg with Angular 2 to dynamically update charts using @ViewChild

I'm currently utilizing Angular2 with PrimeNG for my application. My dashboard includes charts and after attempting to upgrade to PrimeNG rc7 (from rc5) where they addressed an issue with updating charts, I'm facing challenges updating my chart d ...

angular2 Formatting Dates in Material 2 Datepicker

I'm currently utilizing the Angular Material datepicker in my angular4 project. I am looking for a way to format the selected date in the input box with a shorter format such as "May 29, 2017" instead of the current display which is "29/05/2017". Can ...

Error Encountered: Unexpected Identifier in Angular 7 External jQuery Plugin

Struggling to convert a jQuery template to Angular7, I'm facing an issue with loading .js files from the assets folder in the original template to make it functional. Upon starting the application with: ng serve, I encounter the following error in th ...

There is an issue with the property 'updateModf' in the constructor as it does not have an initializer and is not definitely assigned

When working with an angular reactive form, I encountered an issue. After declaring a variable with the type FormGroup like this: updateModf:FormGroup; , the IDE displayed an error message: Property 'updateModf' has no initializer and is not def ...

Unable to launch the application on a newer version without first loading it on an older version of Angular

After transitioning from Angular 2 to Angular 12, I am encountering a problem where the application is loading only if version 2 is compiled and loaded. The newer version seems to be compiling successfully but is showing errors in the console. Any ideas o ...

Tips for effectively managing components during navigation within dynamically loaded components

Our interface includes 3 main navigations for tab views: tab1, tab2, and tab3. Additionally, there is a navigation from the side menu. Each tab dynamically loads components, allowing seamless navigation between different parts of the application. When sw ...

Passing parameters to an Angular 2 component

When it comes to passing a string parameter to my component, I need the flexibility to adjust the parameters of services based on the passed value. Here's how I handle it: In my index.html, I simply call my component and pass the required parameter. ...

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

After updating Angular to version 4.1.0 and activating "strictNullChecks" in my project, I am encountering numerous errors in the templates (.html) that look like this: An object may be 'null' All these errors are pointing to .html templat ...

Update Observable by assigning it a new value of transformed information using the async pipe and RXJS

My service always returns data in the form of Observable<T>, and unfortunately, I am unable to modify this service. I have a button that triggers a method call to the service whenever it is clicked. This action results in a new Observable being retu ...

The date displayed in the table is incorrectly showing 04 instead of 03 when using the pipe

{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...

Angular ngx-leaflet automatically adjusts to focus on a specific region when loading data

Utilizing Angular 6 and ngx-leaflet for my project. I am fetching data from the backend and trying to zoom in on a specific area (in this case India) once the data is loaded onto the map. This is how my HTML appears: <div leaflet style="height: 800px ...