Issue encountered when attempting to synchronize Protractor with the page: "unable to locate Angular on the window" while executing a Protractor test case

Currently, I am conducting tests on an Angular website. Our application flow begins with a Login page followed by a vertical application selection frame (located in the left corner of the page) that consists of non-Angular web pages. Once the user selects an application from the left frame, the Angular site opens within another frame to the right of the application selection frame.

While attempting to automate this scenario using Cucumber and Protractor, I encountered the following error message after logging in and launching the application:

Uncaught exception: Error while waiting for Protractor to sync with the page: "angular could not be found on the window".

[launcher] Process exited with error code 1

Process finished with exit code 1

The relevant code snippet is provided below:

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
var assert = chai.assert;
var myStepDefinitionsWrapper = function () {

    this.Given(/^I login to the application with valid (.*) and (.*)$/, function (username, password) {

        browser.driver.get(browser.baseUrl);
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.id("ContentPlaceHolder1_UsernameTextBox"));
        }, 10000);

        browser.driver.findElement(by.id("ContentPlaceHolder1_UsernameTextBox")).then(function (usernameField) {
            usernameField.sendKeys(username);
        });

        browser.driver.findElement(by.id("ContentPlaceHolder1_PasswordTextBox")).then(function (passwordField) {
            passwordField.sendKeys(password);
        });

        return browser.driver.findElement(by.id("ContentPlaceHolder1_SubmitButton")).click();
    });

    this.Given(/^I launch the application from application selection page$/, function () {
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.xpath("//a[starts-with(@class,'cp-icon') and contains(@style,'applaunch_default_26x26')]"));
        }, 10000);
        browser.driver.findElement(by.xpath("//a[starts-with(@class,'cp-icon') and contains(@style,'applaunch_default_26x26')]")).click();
        browser.driver.wait(function () {
            return browser.driver.isElementPresent(by.xpath("//span[contains(@title,'AppName')]"));
        }, 10000);
        return browser.driver.findElement(by.xpath("//span[contains(@title,'AppName')]")).click();
    });

    this.When(/^I open the task for the (.*)$/, function (PersonName) {
//Anugular Website starts from here
        browser.waitForAngular();
        return element(by.xpath("//td[contains(text(),'" + personName + "')]/following::td[2]/button[text()='Perform']")).click();
    });

Answer №1

I've encountered a similar issue multiple times in the past, particularly with a login page (using angular) that redirects to a 'success' page (without angular), and then further redirects to a landing page (with angular).

Usually, this process goes smoothly:

loginBtn.click();
browser.wait(function () {
    return browser.executeScript('return !!window.angular');
}, 10000, 'Timed out waiting for angular after login page');

Give this a try and see if it works for your situation as well!

After your recent edit: Looks like this one is a tricky situation! Let's dive deeper into it.

Have you considered switching to the frame? Take a look at these resources:

https://angular.github.io/protractor/#/api?view=webdriver.WebDriver.TargetLocator.prototype.frame https://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.switchTo

Since it begins as non-angular, you might need to do this:

browser.driver.switchTo().frame(element(by.id('frameWithAngular')));

You may not necessarily require a browser wait before switching to the frame, but be mindful of the behavior in a non-angular environment initially.

Another suggestion is specifying the rootElement location in your configuration where angular will be present (Line 173): https://github.com/angular/protractor/blob/master/docs/referenceConf.js

This could potentially disrupt your workflow depending on the site structure. Further information on iframes, even though angular-specific, discusses properly handling frames: Protractor: Testing Angular App in an Iframe

Let me know if you make any progress with these suggestions!

Answer №2

Utilized iframe naming technique to navigate to the iframe housing an angular site.

browser.driver.switchTo().frame('<Frame Name>'); 

However, this method was not compatible with protractor versions 2.0 and 2.1, prompting me to revert back to version 1.8.0.

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

Access information through the restful api using the angularjs service $resource

I am attempting to utilize the $resource service with the surveygizmo API. Here is my code: HTML : <div ng-app="Survey"> <body> <div ng-controller="SurveyCtrl"> {{survey.data.title}} </div> </body> </div> My scr ...

Unable to choose a selection or input a value in the dropdown menu

There are three dropdown menus: Pool, Category, Material. The options in the Category dropdown load when a pool is selected, and the options in the Material dropdown load when a category is selected. I am having trouble selecting a value in the Category ...

Retrieve Date and Time in Eastern Standard Time with AngularJS

Incorporating AngularJS, I am retrieving the date from a service as 2014-09-29 and time as 191042. I want to display it in the following format 29 September 2014 19:10:42 ET Is there a way to convert it to Eastern Time Zone since I am receiving the d ...

Display or conceal (sub) list elements using React JS

Within a React JS component, I am using the map function in JavaScript to render a list of items (Recipes) that is passed in from an App parent component. Each item in the list has a sub list of ingredients that is also rendered using the map function. My ...

404 Error: Express API Struggling to Serve Public Files

My current API setup looks like this... index.js require('dotenv').config(); const index = require('./server'); const port = process.env.PORT || 5000; index.listen(port, () => console.log(`Server is live at localhost:${port}`)); ...

How can one effectively manage irregularly nested object/arrays within a Meteor framework?

Having difficulty finding a smart and effective method to manage nested arrays/objects with varying dimensions in nodeJS. These irregular arrays/objects can have 1, 2, 3, or more dimensions. For instance, consider these 2 different scenarios : Scenario 1 ...

Is it possible to verify if a web application is currently active on a different browser tab?

My web application is built using ASP.Net/C# and Javascript and relies on session variables. I am wondering if there is a way to detect if the application is already open in another tab when I launch it? Alternatively, do you have any suggestions for ens ...

Incorrect Results from Angular Code Coverage

Currently using Angular.js, Karma, Karma-coverage (Istanbul), and Jasmine for my stack. While conducting Code Coverage analysis on my app, I encountered an issue which leads to my question - Service A is showing up as covered by tests (in green) even thou ...

Tips for displaying the content of a personalized navigation tab using jQuery

I successfully created custom tabs using JQuery. Here is the code for my custom tabs: <div class="row"> <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active"> <p>Item 1</p> </div> < ...

The operation malfunctions if the variable input is below 50, causing it to produce inaccurate results

The function "calcFinalTotal()" was created to calculate the post-tax discount on a purchase of items that were previously totaled and stored in an input tag with the ID of "totaltaxamount". This function applies a 10% discount to orders between $50 to $ ...

Forcing an HTML5 video source update within an AngularJS project

I'm currently working on a project that involves embedding an HTML5 video onto a view. The video source is dynamically populated using $scope. Initially, the player works perfectly with the video I first load. However, when the video ends, I attempt t ...

JavaScript: Adding up whole numbers--- Reference Error: Undefined

I'm having trouble with my code because it's saying that "t1" is not defined, even though it's the name of my text box. I tried making the variable global by declaring it outside the function, but it didn't solve the issue. Interestingl ...

Inline-block list with consistent spacing between each item

I have a list of five items that are displayed inline. The challenge is to align the text in the first item with the left side and the text in the last item with the right side, while maintaining equal spacing between all items relative to both edges. Aft ...

What is the best way to observe a function and provide a simulated result from within a different function using jasmine?

Query: How can I access the reference of getWindowSize within getBreakpoint() to perform spying on it? Additionally, how can I use callFake to return mock data? media-query.ts export const widthBasedBreakpoints: Array<number> = [ 576, 768, 99 ...

AngularJS has rejected the request to establish an insecure header "cookie," resulting in the error net::ERR_INSECURE_RESPONSE

Attempting to initiate a REST request on the Wildfly server involves logging into the old application first. This login process provides a cookie that must be utilized in the newer application for making the subsequent REST requests. The new application is ...

Objects within an array are not sorted based on their properties

I'm currently struggling with sorting an array of objects based on a specific property. Despite my efforts, I can't seem to figure out what's causing the issue as it remains unsorted. Would appreciate some assistance. You can take a look at ...

The velocity of jQuery selectors

Which is more efficient: using only the ID as a selector or adding additional identifiers? For instance $('#element') vs $('#container #element') or getting even more detailed: $('body div#container div#element') ? ...

What could be causing document.getElementById to return null?

I've been troubleshooting my code and noticed that one of the methods in my JavaScript file is not functioning correctly. Does anyone have any insights into why this might be happening? index.html: <!DOCTYPE html> <html lang="en"> <he ...

When you click on an element in Angular, it will not fade out as expected, instead displaying the error message "

After pressing the delete button in my twig file, the item is removed but it doesn't fade away as expected. I tried to seek help on this thread but couldn't comprehend the solution. Although the item is being deleted, I am encountering an error ...

Issue: EPROTO 34557064 - Something went wrong. SSL routines reported the error code 100000f7, indicating an issue with the version number

Alert: EPROTO 34557064:error:100000f7:SSL routines:OPENSSL_internal:WRONG_VERSION_NUMBER:../../third_party/boringssl/src/ssl/tls_record.cc:242: The problem arises from attempting to make a POST request to an HTTPS endpoint that only accepts HTTP connectio ...