The waitForAngularEnable function is failing to work properly as it is throwing a ScriptTimeoutError, indicating that the result was not received within

My journey begins on an Angular starting page. Clicking a button takes me to a login page that is non-angular. Once logged in, the rest of the pages are angular.

I am utilizing async/await.

  • I attempted including waitForAngularEnable(true) in onPrepare but it did not work.
  • I also tried adding waitForAngularEnable(true) after login, but this was unsuccessful as well.
  • Increasing the timeOut did not resolve the issue either.
  • The only success I had was when using waitForAngularEnable(false). I could not rely on Protractor's built-in feature waitForAngular which waits for Angular to load. Currently, with waitForAngularEnable(false), I am manually managing it by using browser.driver.wait(until.elementsLocated(by.id(value)), 30000); or await browser.wait(ExpectedConditions.presenceOf(ele), 30000);. This approach works for me.

Versions-
"protractor": "^5.4.2"
"node" : 10.15.3
"target": "es6"
"cucumber": "^5.1.0",
"cucumber-html-reporter": "^5.0.0"
ScriptTimeoutError: script timeout: result was not received in 30 seconds
(Session info: chrome=74.0.3729.169)
(Driver info: chromedriver=74.0.3729.6
(255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29}),platform=Windows NT 10.0.17763 x86_64) at Object.checkLegacyResponse
(C:\Automation\General\node_modules\selenium-webdriver\lib\error.js:546:15) at parseHttpResponse (C:\Automation\General\node_modules\selenium-webdriver\lib\http.js:509:13)
at doSend.then.response (C:\Automation\General\node_modules\selenium-webdriver\lib\http.js:441:30)
at process._tickCallback (internal/process/next_tick.js:68:7) From: Task: Protractor.waitForAngular() - Locator: By(xpath, //span[@class='title__subtext'])

angulartypescriptprotractorcucumber

Answer №1

My Interpretation of Your Issue

  • To start, you open the Angular page.
  • You log in.
  • Then, when you are redirected to a non-angular page (where Protractor is no longer responsive), you attempt 
    await browser.waitForAngularEnabled(false);
    .
  • Unfortunately, since you are now on a non-angular page, Protractor remains unresponsive.

The Correct Approach

  • Begin by opening the Angular page.
  • Enter your credentials.
  • Prior to clicking the submit button, execute 
    await browser.waitForAngularEnabled(false);
    .
  • Upon being directed to a non-angular page (at this stage, Protractor can interact with it), feel free to proceed with any necessary actions.

In essence, disable the waiting for Angular while still on an Angular page.

Additionally, make sure to enable the feature only upon returning from a non-angular page to an Angular one.

Answer №2

If you need to use waitForAngularEnabled multiple times within the same test, there is a workaround that involves adding browser.get in between. Here's how you can do it:

// Perform actions on your Angular application

waitForAngularEnabled(false)

// Perform actions on a non-angular page

waitForAngularEnabled(true)
browser.get('/home') // This loads a page from your Angular application

Remember that the browser.get function will wait until the Angular page has finished loading.

Answer №3

When dealing with Angular apps, Protractor will wait until the Angular Zone stabilizes before proceeding. This can cause long-running asynchronous operations to halt the progress of your test. To avoid this issue, it is recommended to run certain tasks outside of the Angular Zone.

You may need to temporarily set a timeout as a workaround until the problem is resolved at the application level.

allScriptsTimeout: 60000

If you would like to learn more about this topic, check out this informative article:

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

Utilizing a Dependency Injection container effectively

I am venturing into the world of creating a Node.js backend for the first time after previously working with ASP.NET Core. I am interested in utilizing a DI Container and incorporating controllers into my project. In ASP.NET Core, a new instance of the c ...

javascriptnode.jstypescriptexpress

How can I retrieve the decimal x and y coordinates when the mouse is moved in Typescript Angular?

I am in the process of transitioning my user interface from Flash/Flex, where it stores values in decimal format. I need to access and reuse these values. Here is a demo showcasing my problem. Here is a snippet: import { Component, Input } from '@an ...

javascriptangulartypescriptmouseevent

Encountering an issue with the date pipe in Angular that prevents

I'm trying to incorporate a date pipe in my AngularJS and Firebase project to display the creation date of a post. However, I am facing an issue where the date does not appear when testing it. Below is my create Post function: createPost() { con ...

javascriptangularfirebase

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Dynamically determine the length of an array using Typescript

Can the length of an array be determined based on a numerical variable? For example: func(1); // outputs [string] func(2); // outputs [string, string] func(5); // outputs [string, string, string, string, string] ...

typescripttypescript-generics

Utilize Typescript to aim for the most recent edition of EcmaScript

Are you looking to configure your typescript build to compile to the most recent version or the most current stable release of EcmaScript? For example, using this command: tsc --target <get latest version> Alternatively, in a tsconfig file: { & ...

javascriptnode.jstypescriptecmascript-6tsconfig

Guide on utilizing external namespaces to define types in TypeScript and TSX

In my current project, I am working with scripts from Google and Facebook (as well as other external scripts like Intercom) in TypeScript by loading them through a script tag. However, I have encountered issues with most of them because I do not have acces ...

typescriptfacebook-javascript-sdk

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Alter the navigation but keep the URL intact without modifying the view

I have an Angular project that includes a login component. The login component is located in the directory app/main/login. I am trying to navigate to the login component from app.component.html using a button. Below is the code snippet from my app-routi ...

javascriptangulartypescriptangular2-routing

How to efficiently schedule a series of delayed local notifications in Ionic 2

I keep receiving notifications for the second object but not the first. I am utilizing the Local Notifications plugin from ionic native, which you can find more information about here: https://ionicframework.com/docs/v2/native/local-notifications/. Any a ...

angularionic2cordova-pluginslocalnotification

Ways to make the input field appear invalid without the use of forms, causing the bottom outline to turn red when a specific condition is met

Currently, the application does not utilize any forms. I am interested in making the input field invalid under certain conditions within the component. For example, if a user leaves the input field blank, I would like the bottom outline to turn red when an ...

angularangular-materialangular6angular-forms

Unlock the File Explorer in Angular 8 by clicking on an anchor link to access and view files

By simply clicking on the anchor link provided in the application user interface, it is expected to open the server folder in the file explorer, allowing the user to access and view all the files, images, etc. In an HTML file, the code would appear as: &l ...

angular

Tips for reducing a discriminated union by using the key value of a Record

I am working with a union type that has a discriminator property called "type". I then define a Record<> where the keys are the "type" property values. How can I specify the second generic parameter of the Record (Record< , this param>) so tha ...

typescript

Tips for updating a service variable value within a component

My goal is to pass user input to the deviceName string in my component, which should then be passed to the deviceIP string in my service. It seems like the order of using get/set methods might be incorrect. Can someone help me identify the mistake? Below ...

javascriptangulartypescript

What is the process for including an optional ngModelGroup in Angular forms?

I'm encountering an issue with incorporating the optional ngModelGroup in angular forms. Although I am familiar with how to use ngModelGroup in angular forms, I am struggling to figure out a way to make it optional. I have attempted to pass false, nu ...

javascriptangularangular-forms

Javascript operations for duplicating and altering arrays

In my Angular application, I am working with an array called subAgencies that is connected to a datasource. I need to implement 2-way binding on this array. Currently, I have a method in place where I copy the contents of the original array to a new one, ...

arraysangulartypescript

Angular2 RC definitions are not recognized by tsc

Currently, I am utilizing angular version 2.0.0-rc.1, however, I am encountering issues with the typescript compiler (Typescript version 1.8.10). Whenever I run tsc on my project, I am bombarded with numerous errors similar to this one: app/app.componen ...

typescriptangulartsc

Rearrange the provided string in a particular manner

Looking to transform a string like '12:13:45.123 UTC Sun Oct 17 2021' into 'Sun Oct 17 2021 12:13:45.123 UTC' without calling slice twice. Is there a more elegant and efficient way to achieve this? Currently using: str.slice(18)+&apo ...

javascriptnode.jsstringtypescript

``Engulfed in a sea of NgRx ViewModel

Apologies if this is unclear, there might be a fundamental aspect that I am overlooking, but here is my current issue: I am fetching a list of items from the backend, similar to: interface Item { id: number; userId: number; categoryId: number; } ...

angulartypescriptreduxngrxngrx-store

Difficulty encountered while trying to set up Angular Materials

Currently, I am tackling a project using Angular 17 and have opted for Angular Materials. However, I am encountering issues with the installation process. The error message displayed in the terminal is as follows: The package @angular/<a href="/cdn-cgi/ ...

angularnpmmaterials