Angular: Protractor - count() 未解析并导致超时

Question

我正在尝试对轮播端到端组件测试进行简单计数

旋转木马.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'));
  }
}

还有我的规范文件:

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);
  });
});

我有所有最新的或接近最新的至少包

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

第一次测试运行正常，第二次超时

1) Carousel组件检查正确显示的指标数量 - 失败:WAITING异步 Angular 任务在 20 秒后完成时超时。这可能是因为当前页面不是 Angular 应用程序。更多详情请查看常见问题解答:https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular

在等待带有定位器的元素时 - Locator: By(css selector, cfc-custom-select)

免责声明我在 ngAfterViewInit() 中确实有 setTimeout这里:

 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);
  }

因此我尝试了

browser.ignoreSynchronization = true;

和

browser.driver.sleep(50);

和

browser.waitForAngular();

但后来我得到计数​​为 0

所以经过一些调试后，我发现轮播组件中的 setInterval 破坏了测试

我应该使用 browser.ignoreSynchronization = true; ??

有什么想法吗？

Answer 1

因此，由于轮播组件中的 setInterval 和其他超时功能，我需要添加

browser.ignoreSynchronization = true;

我稍微修改了我的 getCarouselIndicators 函数成为:

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

现在测试解决并完美运行!