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，因为测试用例是重复性的，并且每次保存表单时索引和ID都会改变。

这是父选项卡：

<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']"))

在标签（父标签和子标签）中找到标签元素

1 个答案: