getting "Could not find Angular on page" inconsistently.

[Bhadja]

Node Version: 14.16.0

Protractor Version: 7.0.0

Angular CLI Version: 11.2.4

Browser(s): chrome headless

Operating System and Version Windows: Windows Server 2019 Standard

Protractor configuration file:

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
    //getPageTimeout: 30000,
    allScriptsTimeout: 150000,
    suites: {
        iT2b001m010:  './firstnational/spec/it2b001m010/**/*.spec.ts',
        iT2b001m011:  './firstnational/spec/it2b001m011/**/*.spec.ts',
        iT2b001slng:  './firstnational/spec/it2b001slng/**/*.spec.ts'        
    },
    capabilities: {
        browserName: 'chrome',
        chromeOptions: { args: ['--allow-insecure-localhost', '--no-sandbox',  '--headless'] } 
    },
        directConnect: true,
    baseUrl: 'http://srv-200201.netfective.com/',
    framework: 'jasmine',
    useAllAngular2AppRoots: true,
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 700000,
        print: function () { }
    },
    beforeLaunch: function () {
        require('ts-node').register({
            project: 'firstnational/tsconfig.e2e.json'
        });

    var fs = require('fs-extra');
    var currentSuite = require('yargs').argv.suite;
    var screenshotPath = './reports/' + currentSuite + '/screenshots/'
    fs.emptyDir(screenshotPath, function (err) {
        console.log(err);
    });
},
onPrepare: function () {
    jasmine.getEnv().addReporter(new SpecReporter({
        spec: { displayStacktrace: true }
    }));

    console.log(require('yargs').argv.suite);
    var currentSuite = require('yargs').argv.suite;
    // Adding reporter to create xml file of test results
    var jasmineReporters = require('jasmine-reporters');
    jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
        consolidateAll: true,
        savePath: './reports/' + currentSuite,
        filePrefix: 'xmlresults'
    }));

    // Adding reporter to take screenshots for failing tests
    var fs = require('fs-extra');
    var screenshotPath = './reports/' + currentSuite + '/screenshots/'
    fs.emptyDir(screenshotPath, function (err) {
        console.log(err);
    });
    jasmine.getEnv().addReporter({
        specDone: function (result) {
            if (result.status == 'failed') {
                browser.getCapabilities().then(function (caps) {
                    var browserName = caps.get('browserName');

                    browser.takeScreenshot().then(function (png) {
                        var stream = fs.createWriteStream(screenshotPath + browserName + '-' + result.fullName + '.png');
                        stream.write(new Buffer(png, 'base64'));
                        stream.end();
                    });
                });
            }
        }
    });
},
onComplete: function () {
    var browserName, browserVersion;
    var capsPromise = browser.getCapabilities();
    var currentSuite = require('yargs').argv.suite;

    capsPromise.then(function (caps) {
        browserName = caps.get('browserName');
        browserVersion = caps.get('version');

        var HTMLReport = require('protractor-html-reporter');

        testConfig = {
            reportTitle: currentSuite + ' Execution Report',
            outputPath: './reports/' + currentSuite,
            screenshotPath: 'screenshots',
            testBrowser: browserName,
            browserVersion: browserVersion,
            modifiedSuiteName: false,
            screenshotsOnlyOnFailure: true
        };
        new HTMLReport().from('./reports/' + currentSuite + '/xmlresults.xml', testConfig);
    });
}

};

First few lines of the test case spec.ts:

 describe('Login', function () {
        beforeAll(() => {
            browser.driver.manage().window().maximize();
            browser.get('/');
        });
    });

When I'm running this test case on that server, it is running fine with the chrome session. The issue is happening when I'm running it headless thru the Azure DevOps pipeline on a self-hosted agent on the server. It works just fine sometimes but when it fails, it fails with the following error:

E/protractor - Could not find Angular on page http://srv-200201.netfective.com/ : retries looking for angular exceeded

Login
  × Open the "(001M) INITIAL MENU" screen
    - Failed: Angular could not be found on the page http://srv-200201.netfective.com/. If this is not an Angular application, you may need to turn off waiting for Angular.
                              Please see 
                              https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
                              Please see 
                              https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
    - Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined.  This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for details"

[andredesousa]

First of all. Do you have an Angular page? If not, you need to open the page as a non-Angular application.

For more details, I found this article: browser.get vs browser.driver.get

Therefore, you can adapt your script to:

describe('Login', () => {
  beforeAll(async () => {
    await browser.driver.manage().window().maximize();
    await browser.driver.get('/');
  });
});

[Bhadja]

HI @andredesousa,

Yes, I have an Angular page at the baseURL. It runs successfully a few times but it is random. (note: the issue is happening when I run it headless thru the Azure pipeline.)

[andredesousa]

In my opinion, this is not related to protractor. I recommend that you take a screenshot, when the test fails, to see if you are on the same page.

You can see in the next file an example to take screenshots only for failed tests: https://github.com/andredesousa/essential-angular-scaffold/blob/main/e2e/protractor.conf.js

[Bhadja]

Hi @andredesousa

You're right, I was starting the dot cover at the same time as the protractor command in the pipeline, it was making the angular application unavailable for few seconds. I fixed the issue by keeping the timeout of 30 seconds right before that protractor command.

[andredesousa]

@Bhadja Nice. It´s done.