Angular: protractor - count() not resolving and causing timeout

Question

I am trying to do simple count on my carousel e2e component testing

carousel.po.ts

import { browser, element, by, Key } from 'protractor';

export class CarouselDemoPage {
  navigateTo() {
    return browser.get('/design/carousel');
  }


  getCarouselComponent(index: number) {
     return element.all(by.css('cfc-carousel')).get(index);
  }



  getCarouselIndicators(index: number) {
    return this.getCarouselComponent(index).element(by.css('.indicators')).all(by.repeater('item in items'));
  }
}

And my spec file:

import { CarouselDemoPage } from './carousel.po';


describe('Carousel component', () => {
  let page: CarouselDemoPage;

  beforeEach(() => {
    page = new CarouselDemoPage();
    page.navigateTo();
  });

  it('At least one carousel component should exist', () => {
    expect<any>(page.getCarouselComponent(0)).toBeDefined();
  });

  it('Check correct number of indicators displayed', () => {
    expect<any>(page.getCarouselIndicators(0).count()).toEqual(4);
  });
});

I have all the latest or close to the latest at least packages

"@angular/core": "^5.0.0-beta.7", "jasmine-core": "~2.8.0", "protractor": "~5.1.2"

The first test runs fine, getting a time out on the second

1) Carousel component Check correct number of indicators displayed - Failed: Timed out waiting for asynchronous Angular tasks to finish after 20 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

While waiting for element with locator - Locator: By(css selector, cfc-custom-select)

Disclaimer I do have the setTimeout in ngAfterViewInit() here:

 ngAfterViewInit() {
    // Needs the timeout to avoid the "expression has changed" bug
    setTimeout(() => {
      this.items = this.viewItems.toArray().concat(this.contentItems.toArray());
      this.totalItems = this.items.length;
      this._first = this.items[0];
      this._last = this.items[this.totalItems - 1];

      this._setItemsOrder(this.currentFrame);
      this._setInterval();
    }, 0);
  }

Thus I tried the

browser.ignoreSynchronization = true;

and

browser.driver.sleep(50);

and

browser.waitForAngular();

but then I get the count to be 0

So after some debugging I figured out that setInterval in my carousel components breaks the test

should I use browser.ignoreSynchronization = true; ??

Any ideas?

Why would it be "obvious" ? I don't see you mentioning it explicitly in the question body. — demouser123
I put in specifically in the list of packages what version of angular I am using... and I pust a snippet at has ngAfterViewInit in... which is angular's lifecycle hooks.... I put the tag and I put it in the title... plus protractor is designed specifically for angular.... so how much more do you need? — DS_web_developer
Where are you using that cfc-custom-select selector? You are waiting for it but you are not mentioning it in your tests. Is it possible it's part of some beforeEach or afterEach? Don't mess with ignoreSynchronization, there is probably a bug in your test. — Sulthan

DS_web_developer DS_web_developer · Accepted Answer · 2017-10-02T10:07:26

So, because of setInterval and other timeout functionality in the carousel component, I needed to add the

browser.ignoreSynchronization = true;

and I slightly modified my getCarouselIndicators function to be:

getCarouselIndicators(index: number) {
    browser.ignoreSynchronization = true;
    return this.getCarouselComponent(index).all(by.css('.indicators li'));
}

Now test resolves and works perfectly!

Angular: protractor - count() not resolving and causing timeout

1 Answers