AngularFire / Protractor: a solution to the famous ScriptTimeoutError error message

As part of the development of ionic application 4 / Angular 6 / AngularFire2, specifically the e2e tests, I turned round for more than 24 hours, following a mysterious behavior of the test environment that crashed on error messages: ScriptTimeoutError: script timeout: result was not received in 11 seconds.

I worked hard on the protractor.conf.js configuration file and on the .steps.ts files by trying several possible combinations:

When(/^User click on the button "([^"]*)"$/, async (id) => {

   await element(by.id(id)).click();

});

When(/^User click on the button "([^"]*)"$/, function(id:string, callback){

   element(by.id(id)).click().then(callback);

});

but no light at the end of the tunnel.

Until I come across a discussion on github (https://github.com/angular/angularfire2/issues/225) where I discover that the problem comes from the AngularFirestore that operates in the same execution context "zone" than Angular; AngularFirestore triggers a series of intervals and timeouts, which, in turn, prevent protractor from synchronizing with Angular.

The solution:

  Well, you just have to run AngularFirestore in a different execution context than the main context, namely the angular framework. using NgZone

import { Injectable, NgZone } from '@angular/core';

import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()

export class FirestoreService {

   constructor(

      private firestore: AngularFirestore,

      private zone: NgZone) {

   }

   save(item: any, collection: string){

      this.zone.runOutsideAngular(() => {

         let shirtsCollection = firestore.collection<Item>('tshirts');

         shirtsCollection.add({ name: 'item', price: 10 });

      });

   }

}

this is an automatic translation of that