0

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

Sanket Achari
  • 480
  • 1
  • 6
  • 20

2 Answers2

3

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.

enter image description here

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);
Sanket Achari
  • 480
  • 1
  • 6
  • 20
  • 1
    In some random cases, the id becomes md-tab-label-1-0 instead of md-tab-label-0-0, and md-tab-label-1-1 instead of md-tab-label-0-1, is there a pattern for this? – Wael Oct 22 '20 at 20:12
0

Try to use this then in order to retrieve the mength

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

Or

elems.count().then(function (size) {
   expect(size).toEqual(2);
});
Mahmoud
  • 868
  • 11
  • 27
  • 1
    No, its not working. " expect(elems.count()).toEqual(2)" is correct. The problem is with "md-tab-group". Protractor is not identifying elements inside "md-tab-group". – Sanket Achari Nov 20 '17 at 08:44