Protractor encounters difficulty in finding element once homepage has fully loaded

Encountering issues with locating elements on the homepage after logging in.

Scenario: Click on profile name/icon and then click on the Logout button

it('Signout', function() {
                //tried with following code 
                //browser.waitForAngularEnabled(true);
                //locator below 
                //var profileIcon=element(by.model('user'));
                common.btnClk(homepage.profileIcon);
                common.btnClk(homepage.FCS_signoutbtn);
                browser.close();

            });

Workaround: The elements can only be found when refreshing the homepage using browser.refresh(). Please provide solutions without relying on this workaround.

Logs:

[31m- [39m[31mFailed: Timed out waiting for asynchronous Angular tasks to finish after 120 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
  While waiting for element with locator - Locator: by.model("user"). 
  The following tasks were pending:
   - $timeout: function (){$rootScope.authenticated=false;$cookies.remove("access_token");$cookies.remove("organizationId");$cookies.remove("authenticated");$cookies.remove("user_infos");$cookies.remove("user_profile_infos");$cookies.remove("user_depts");ChatSocket.disconnect();$state.go('core.login',{},{reload:true});$rootScope.options={position:'toast-top-right',type:'error',iconClass:{name:'error'},timeout:'5000',extendedTimeout:'1000',html:false,closeButton:true,tapToDismiss:true,closeHtml:'<i class="fa fa-times"></i>'};var msg="Your Token is Expired!";$rootScope.openToast("Session Timeout",msg);}[39m

Executed 2 of 2 specs[31m (1 FAILED)[39m in 2 mins 55 secs.

[12:57:53] I/launcher - 0 instance(s) of WebDriver still running
[12:57:53] I/launcher - chrome #01 failed 1 test(s)
[12:57:53] I/launcher - overall: 1 failed spec(s)
[12:57:53] E/launcher - Process exited with error code 1

Additional Info: Attempted using browser.ignoreSynchronization = true; and located via xpath successfully. However, aiming to test using an angular approach. ** Website is angular site ** Tried with: browser.driver.manage().window().setSize(1280, 1024); browser.ignoreSynchronization = false; allScriptsTimeout: 160000, defaultTimeoutInterval: 160000

Please provide any solutions.

Answer №1

Seems like there is a $timeout pending on the page that needs attention. Refreshing the page seems to temporarily fix the issue, which could indicate a bug related to login/authentication and page transitions (possibly a timing conflict causing unresolved promises).

If this is indeed the case, it might be beneficial to clear the ControlFlow as a final step before loading the new page. Your developers should be able to assist with this.

As a temporary solution, you can try:

browser.waitForAngularEnabled(false); //may clear Protractor/Selenium ChangeDetection in the ControlFlow
browser.waitForAngularEnabled(true); //will resume observing the ControlFlow for new promises

Although this suggestion is speculative, it's worth testing out to see if it helps resolve the issue.

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 the status of --async-stack-traces feature in node version 16 and above, and is there a replacement option available?

My query is similar to this one, but pertains to Node 16+. The response at the bottom of that thread mentions: For Node 14+ you can utilize the --async-stack-traces flag to enhance stack trace when dealing with asynchronous code. However, there are certain ...

removing a specific cookie from the browser's cookies using jQuery

This block of code displays a URL along with a delete image for removing a cookie. The add and display functions are working fine, but I'm stuck on how to implement the delete function. function backLinks(){ var pathname = window.location; va ...

Error encountered when uploading files using Multer (Node.js and React)

I've just submitted a request from the client, and it seems to be causing some issues. Here's the code snippet that is giving me trouble: if(file){ const data = new FormData() const fileName = Date.now() + file.name data.append( ...

Creating a CSS animation to slide a div outside of its container is

I currently have a flexbox set up with two adjacent divs labeled as DIV 1 and DIV 2. By default, both DIV 1 and DIV 2 are visible. DIV 2 has a fixed width, occupying around 40% of the container's width. DIV 1 dynamically adjusts its width to ac ...

Unspecified data response error in Angular JS

As a beginner in Angular JS, I am currently working on calling a Rest API using JSON data. However, when I run the HTTP-server, I am not receiving my response data as expected. function retrieveContacts(contactsdata) { contactsdata.getContacts().the ...

Comparison of Lit Element and VSCode Plugin: Unfamiliar attribute 'frameborder'

I have a question regarding the use of an iframe within the template of a lit element. The lit element VSCode plugin is reporting the following errors: Unknown attribute 'frameborder'. Did you mean '.frameBorder'? This is a built-in t ...

The function for utilizing useState with a callback is throwing an error stating "Type does not have

Currently, I am implementing the use of useState with a callback function: interface Props { label: string; key: string; } const [state, setState] = useState<Props[]>([]); setState((prev: Props[]) => [...pr ...

Exploring JSON Object Iteration Using jQuery for AJAX Requests in JavaScript

I am struggling to grasp this concept. Currently, I have a JSON file that contains a collection of hospitals, including their addresses, operating hours, and phone numbers. My goal is to make an AJAX call to retrieve data from the JSON file and display i ...

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Hi there, I'm new to Javascript and looking for a way to simplify my code. Is there a way to use a loop to change the id values in HTML without manually editing them one by one? Here's what I have so far: <table border="2" cellpadding="4"> ...

Modify the templateUrl in routeProvider according to the user's authorization

Is there a way to dynamically change the templateUrl in the router provider based on user permissions? Here's an example of what I'd like to achieve: $routeProvider .when('/',{ if(user) templateUrl:'app/views/pages/h ...

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

Error: The connection to Node/Postgresql was refused at 127.0.0.1:5432. This occurred after connecting at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)

After running a Node server connecting to a Postgresql DB (via Knex) without issues, my laptop crashed. Upon restart, the DB connection stopped working, showing this error message: Error: connect ECONNREFUSED 127.0.0.1:5432 at TCPConnectWrap.afterConnect ...

Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

I'm attempting to transform a method into a generic method for use with arrow functions in JavaScript, but I'm struggling to determine the correct way to do so. groupBy: <Map>(predicate: (item: T) => Map[]) => Map[]; Array.prototype ...

NEXT.JS - LocalStorage unexpectedly resets data to its initial state instead of persisting changes after the page is refreshed

Upon initial component run, "1" is displayed. Clicking the button appends it by 3 successfully. The value inside local storage also updates accordingly. However, upon reloading the page, the local storage reverts back to 1. What could be the missing piec ...

Having trouble retrieving information from a nested JSON array within a JSON object using JavaScript

I am facing a challenge with extracting specific information from a JSON object that contains an array nested inside. Even though I have experience working with JSON arrays, this particular object is proving to be tricky. For example, when attempting to r ...

Is it possible for me to make the default export anonymous?

Why bother naming the export if you already have a file with the default export name? This seems redundant and goes against the DRY principle. While there is a rule that discourages anonymous default exports, how can we enforce an error when someone does ...

The expected origin for the sine wave animation is not being met as intended

Experimenting with three.js, I am attempting to create an animation of a sine wave that originates from where a plane is clicked with the mouse. However, there seems to be a discrepancy in the ripple's starting point as it always emanates from the mid ...

Ways to cycle through various selectors

I'm in the process of developing a form that allows users to assign properties to multiple files before importing them into my database. It's crucial for me to know the source and sport associated with each file before proceeding with the import. ...

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

I have encountered an issue with my Jest test for an AWS CDK configuration import { expect as expectCDK, matchTemplate, MatchStyle } from '@aws-cdk/assert'; import * as cdk from '@aws-cdk/core'; import { KmsMultiregionPrincipalKey } fro ...

An error was encountered because it was unable to read properties of undefined, specifically in trying to access 'navigate'

Just diving into the world of react native and react navigation, I encountered this puzzling error. Uncaught TypeError: Cannot read properties of undefined (reading 'navigate') I'm scratching my head because I am using the exact same code ...