Angular e2e test fail with no apparent reason (timeout)

Bug report

Hi, I have a simple tests, that switches between tabs (made with angular/material). It clicks on a tab, checks a certain condition, and then it switches back and checks again. This test worked OK until recently, it just stopped working. I didn’t make any drastic changes except adding d3 to my project (test stopped working when I’ve made an innocuous commit that calculates pie chart arc coordinates in one of my components).

I’ve tried setting higher timeout values in beforeEach, and in allScriptsTimeout, and also in onPrepare, but none of the methods worked (though it shows different error - timeout error). I’ve provided stack trace, if anyone can help me decipher what is the bug.

• Node Version: 10.14.2

• Protractor Version: 5.3.1

• Angular Version: 7.1.3

• Browser(s): Chrome/Chromium Headless

• Operating System and Version Ubuntu 16.04

• Your protractor configuration file

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

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

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: [ '--headless', '--disable-gpu', '--window-size=1024x768','--no-sandbox' ]
    },
    proxy: {
      proxyType: 'manual',
      httpProxy: 'localhost:7000'
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
};

• A relevant example test

N/A

• Output from running the test

    ✗ should be able to switch between tabs
      - Failed: script timeout: result was not received in 11 seconds
        (Session info: headless chrome=71.0.3578.98)
        (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-45-generic x86_64)
        (Session info: headless chrome=71.0.3578.98)
        (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-45-generic x86_64)
          at Object.checkLegacyResponse (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/error.js:546:15)
          at parseHttpResponse (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/http.js:509:13)
          at doSend.then.response (/home/user/repos/myProject/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(css selector, app-myProject-grid#agrid > gridster)
          at Driver.schedule (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/webdriver.js:807:17)
          at ProtractorBrowser.executeAsyncScript_ (/home/user/repos/myProject/node_modules/protractor/built/browser.js:425:28)
          at angularAppRoot.then (/home/user/repos/myProject/node_modules/protractor/built/browser.js:456:33)
          at ManagedPromise.invokeCallback_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:1376:14)
          at TaskQueue.execute_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:3084:14)
          at TaskQueue.executeNext_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:3067:27)
          at asyncRun (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2927:27)
          at /home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:668:7
          at process._tickCallback (internal/process/next_tick.js:68:7)
      From: Task: <anonymous>
          at pollCondition (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2195:19)
          at /home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2191:7
          at new ManagedPromise (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:1077:7)
          at ControlFlow.promise (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2505:12)
          at /home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2190:22
          at TaskQueue.execute_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:3084:14)
          at TaskQueue.executeNext_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:3067:27)
          at asyncRun (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2927:27)
          at /home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:668:7
          at process._tickCallback (internal/process/next_tick.js:68:7)
      From: Task: <anonymous wait>
          at scheduleWait (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2188:20)
          at ControlFlow.wait (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2517:12)
          at Driver.wait (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/webdriver.js:934:29)
          at run (/home/user/repos/myProject/node_modules/protractor/built/browser.js:59:33)
          at ProtractorBrowser.to.(anonymous function) [as wait] (/home/user/repos/myProject/node_modules/protractor/built/browser.js:67:16)
          at AppPage.clickOnRawDataTab (/home/user/repos/myProject/e2e/app.po.ts:35:13)
          at UserContext.<anonymous> (/home/user/repos/myProject/e2e/app.e2e-spec.ts:33:10)
          at /home/user/repos/myProject/node_modules/jasminewd2/index.js:112:25
          at new ManagedPromise (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:1077:7)
          at ControlFlow.promise (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2505:12)
      From: Task: Run it("should be able to switch between tabs") in control flow
          at UserContext.<anonymous> (/home/user/repos/myProject/node_modules/jasminewd2/index.js:94:19)
          at /home/user/repos/myProject/node_modules/jasminewd2/index.js:64:48
          at ControlFlow.emit (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/events.js:62:21)
          at ControlFlow.shutdown_ (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2674:10)
          at shutdownTask_.MicroTask (/home/user/repos/myProject/node_modules/selenium-webdriver/lib/promise.js:2599:53)
      From asynchronous test: 
      Error
          at Suite.<anonymous> (/home/user/repos/myProject/e2e/app.e2e-spec.ts:30:3)
          at Object.<anonymous> (/home/user/repos/myProject/e2e/app.e2e-spec.ts:3:1)
          at Module._compile (internal/modules/cjs/loader.js:689:30)
          at Module.m._compile (/home/user/repos/myProject/node_modules/ts-node/src/index.ts:403:23)
          at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
          at Object.require.extensions.(anonymous function) [as .ts] (/home/user/repos/myProject/node_modules/ts-node/src/index.ts:406:12)

**************************************************
*                    Failures                    *
**************************************************

1) myProject App should be able to switch between tabs
  - Failed: script timeout: result was not received in 11 seconds
    (Session info: headless chrome=71.0.3578.98)
    (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-45-generic x86_64)

Executed 7 of 7 specs (1 FAILED) in 43 secs.
[16:15:40] I/launcher - 0 instance(s) of WebDriver still running
[16:15:40] I/launcher - chrome #01 failed 1 test(s)
[16:15:40] I/launcher - overall: 1 failed spec(s)
[16:15:40] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined

• Steps to reproduce the bug

N/A

[ganqqwerty]

So I think I figured it out. Basically any action on an element selected by By.css or $ or $$ or whatever causes protractor to first wait for angular to stabilize by calling the waitForAngular function.

This function is waiting for all pending http-queries and all unfinished timeouts and doesn’t allow the script to proceed further if they are found.

So basically most of the time you can just user browser.sleep(3000) most of the times, because the majority of timeouts happen in animations and such, and most of http-queries will be finished after 3 seconds.

However sometimes the timeouts will not be finished in 3 seconds: such as in cases of long polling or some features implementd using super-long timeouts. In our application we had the auto-logout feature implemented. After login, the service would check the expiration date of the JWT token and wait for (ExpirationDate-CurrentDate) before logging the user out. As you can imagine, it was a huge timeout, 36-hours timeout! After we removed it, everything worked like a charm.

Don’t do that, implement these features differently. Search for all occurences of setTimeout, setInterval, timeout, interval in your code and deal with them.

[Dolgovec]

If anyone still looking for the answer, I’ve found this article as a solution: https://christianliebel.com/2016/11/angular-2-protractor-timeout-heres-fix/

In short: add your setInterval / setTimeout inside this.ngZone.runOutsideAngular and the problem should be gone