如何从量角器访问 angular md-tab 元素？

Question

Html:

<md-tab-group class="my-tab-group">
    <md-tab class="my-tab"></md-tab>
    <md-tab class="my-tab"></md-tab>
</md-tab-group>

e2e 测试：

elems = element(by.css('.my-tab-group')).all(by.css('.my-tab'))
expect(elems).toBeTruthy();
expect(elems.count()).toEqual(2);

此测试失败：Expected 0 to equal 2。

为什么量角器无法识别制表符的数量。这是由于 angular 元素 md-tab-group 而发生的。如果我评论 md-tab-group，我就可以访问选项卡。如何在 md-tab-group 出现时访问选项卡元素？

P.S。我正在使用 Angular 4.0

Answer 1

然后尝试使用它来检索 mength

elems = element(by.css('.my-tab-group')).all(by.css('.my-tab'));
elems.then(function (result) {
  expect(result.length).toEqual(2);
});

或者

elems.count().then(function (size) {
   expect(size).toEqual(2);
});

Answer 2

Angular 为 md-tab 创建新元素（angular 指令）。此类选项卡可以通过 id 引用，例如第一个选项卡的 "md-tab-label-0-0"，第二个选项卡的 "md-tab-label-0-1"，如下图所示。

第一个选项卡元素可以通过

访问

element(by.id('md-tab-label-0-0'));

而且，问题的答案是

elems = element.all(by.css('.mat-tab-labels'))
expect(elems).toBeTruthy();
expect(elems.count()).toEqual(2);

How to access angular md-tab elements from protractor?