Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Protractor can't detect Angular 5 on deployed application

I am trying to create a repository with E2E tests for my web application using Protractor and Cucumber. I have started with this repository: https://github.com/spektrakel-blog/angular-protractor-cucumber

When I am forcing Protractor to treat the application as a regular webpage, the tests run fine. Test runner is interacting with the application and expecting some outcome. The thing is, that I would like to make Protractor detect Angular in order to wait for zones to be stable before checking 'Then' asserts.

Here is my protractor.conf.js:

exports.config = {
  allScriptsTimeout: 30000,
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--no-sandbox']
    }
  },
  directConnect: true,
  baseUrl: 'http://<ci-server-address>/',

  specs: [
    './e2e/features/*.feature'
  ],

  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),

  cucumberOpts: {
    require: ['./e2e/steps/**/*.ts'],
    strict: true,
    format: [
      'json:reports/summary.json'
    ],
    dryRun: false,
    compiler: []
  },

  onPrepare() {
    browser.ignoreSynchronization = true;
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  }
};

In short - the tests run with the following config, but when I remove browser.ignoreSynchronization = true;, I get the following error: Timed out waiting for asynchronous Angular tasks to finish after 30 seconds. This may be because the current page is not an Angular application..

Things I have tried so far (with no improvement):

  • adding ng-app to the <body> tag
  • checking window.getAllAngularRootElements() - returns app-root correctly
  • checking window.getAllAngularTestabilities() - returns a Testability object
  • launching the tests on Chrome (with or without sandbox)
  • launching the tests on Firefox
  • trying both the CI server with our application deployed and local env with ng serve

I am using the latest versions of Protractor, Cucumber, Chai and TypeScript. Any help would be much appreciated. Thank you very much in advance!

like image 420
mc.suchecki Avatar asked May 15 '18 07:05

mc.suchecki


2 Answers

This sounds like a potential Zone issue to me. Angular depends on ZoneJS (ngZone). It is not that uncommon to run into this error when using any asynchronous javaScript functions such as setTimeout(), setInterval(), etc...

The reason being is that ZoneJS monkey patches those functions and it does so out of the context of the Angular zone. At which point when Protractor is trying to connect to your application it no longer is running in the Angular Zone and therefor Protractor will hang and eventually timeout with the error you're getting.

If I were you I would take a look at your application for any asynchronous functions that ZoneJS monkey patches. Also in general, look for anything in your code that is running outside the context of your applications zone.

Here is a good article on ZoneJS that not only helps you understand ZoneJS, but also lists the functions that are monkey patched Understanding ZoneJS

like image 164
Narm Avatar answered Oct 23 '22 16:10

Narm


Verify that your app actually gets stable:

  constructor(zone:NgZone)
  {
    zone.onStable.subscribe(()=> window.console.info('onStable'));
    zone.onUnstable.subscribe(()=> window.console.info('onUnstable'));
    zone.onMicrotaskEmpty.subscribe(()=> window.console.info('onMicrotaskEmpty'));
  }
like image 42
kemsky Avatar answered Oct 23 '22 16:10

kemsky