Найдите элемент вкладки на вкладке (родительская и дочерняя вкладка)

Question

На моей странице есть 2 элемента mat-tab. Один для родителей, а другой для детей.

Я пытаюсь щелкнуть вкладку на моей дочерней вкладке, но когда запускается транспортир, он не работает, потому что сначала всегда идет к родителю, поэтому не удается найти дочернюю вкладку. Оба имеют одинаковые css помимо метки.

Вот как я это сделал ранее. Ранее нет родительской вкладки, поэтому она работает:

this.addressTab=element(by.css("div[class='mat-tab-labels']")).element(by.css("div[aria-posinset='2']")).click();

Я не могу использовать id, mat-tab-label или mat-tab-content, чтобы найти css, потому что контрольный пример повторяется, и индекс и идентификатор будут меняться при каждом сохранении формы.

Это родительская вкладка:

<mat-tab-header class="mat-tab-header" ng-reflect-disable-ripple="false" ng-reflect-selected-index="1">
   <div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true">
      <div class="mat-tab-header-pagination-chevron"></div>
   </div>
   <div class="mat-tab-label-container">
      <div class="mat-tab-list" role="tablist" style="transform: translateX(0px);">
         <div class="mat-tab-labels">
            <!--bindings={
               "ng-reflect-ng-for-of": "[object Object],[object Object"
               }-->
            <div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" ng-reflect-disabled="false" id="mat-tab-label-2-0" tabindex="-1" aria-posinset="1" aria-setsize="2" aria-controls="mat-tab-content-2-0" aria-selected="false" aria-disabled="false">
               <div class="mat-tab-label-content">
                  <!--bindings={
                     "ng-reflect-ng-if": "[object Object]"
                     }--><!--bindings={
                     "ng-reflect-portal": "[object Object]"
                     }--> Overview <!----><!--bindings={
                     "ng-reflect-ng-if": "false"
                     }-->
               </div>
            </div>

Это дочерняя вкладка html:

<mat-tab-header class="mat-tab-header" ng-reflect-disable-ripple="false" ng-reflect-selected-index="0">
   <div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true">
      <div class="mat-tab-header-pagination-chevron"></div>
   </div>
   <div class="mat-tab-label-container">
      <div class="mat-tab-list" role="tablist" style="transform: translateX(0px);">
         <div class="mat-tab-labels">
            <!--bindings={
               "ng-reflect-ng-for-of": "[object Object],[object Object"
               }-->
            <div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" ng-reflect-disabled="false" id="mat-tab-label-3-0" tabindex="0" aria-posinset="1" aria-setsize="4" aria-controls="mat-tab-content-3-0" aria-selected="true" aria-disabled="false">
               <div class="mat-tab-label-content">
                  <!--bindings={
                     "ng-reflect-ng-if": "[object Object]"
                     }--><!--bindings={
                     "ng-reflect-portal": "[object Object]"
                     }--> Patient information <!----><!--bindings={
                     "ng-reflect-ng-if": "false"
                     }-->
               </div>
            </div>

Как перейти на дочернюю вкладку или какой селектор я могу использовать в этом случае, чтобы перейти на дочернюю вкладку?

Или есть способ вставить имя / метку во вкладку html? Я спросил моего разработчика, но он понятия не имеет, можно ли это сделать, поскольку он автоматически генерируется угловым компонентом.

Answer 1

Наконец-то удалось найти элемент. Я использую 3 цепных локатора вместо 2:

element(by.css("mat-card[class='mat-card ng-star-inserted']")).
element(by.css("div[class='mat-tab-labels']")).
element(by.css("div[aria-posinset='2']"))