How to access angular md-tab elements from protractor?

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 test:

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

This test is failing: Expected 0 to equal 2.

Why protractor is not able to identify the number of tabs. This is happening due to angular element md-tab-group. If I comment md-tab-group, I am able to access tabs. How to access the tab elements when md-tab-group is present?

P.S. I am using Angular 4.0

Answer 1

Angular create new elements for md-tab (angular directive). Such tabs can be referred by ids such as "md-tab-label-0-0" for 1st tab, "md-tab-label-0-1" for 2nd tab, as shown in following image.

1st tab element can be accessed by

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

And, answer to the question would be

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