如何通过mat-label文本优化定位mat-select的XPath？

目标HTML结构 #

<div class="mat-form-field-infix ng-tns-c66-377">
   <mat-select _ngcontent-dgg-c495="" role="combobox" aria-autocomplete="none" aria-haspopup="true" class="mat-select ng-tns-c69-378 ng-tns-c66-377 ng-star-inserted" aria-labelledby="mat-form-field-label-339 mat-select-value-217" id="mat-select-216" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false">
      <div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c69-378">
         <div class="mat-select-value ng-tns-c69-378" id="mat-select-value-217">
            <!---->
            <span class="mat-select-value-text ng-tns-c69-378 ng-star-inserted" style="">
               <span class="mat-select-min-line ng-tns-c69-378 ng-star-inserted">Delivery Correction</span><!----><!---->
            </span>
            <!---->
         </div>
         <div class="mat-select-arrow-wrapper ng-tns-c69-378">
            <div class="mat-select-arrow ng-tns-c69-378"></div>
         </div>
      </div>
      <!---->
   </mat-select>
   <span class="mat-form-field-label-wrapper ng-tns-c66-377">
      <label class="mat-form-field-label ng-tns-c66-377 ng-star-inserted" id="mat-form-field-label-339" for="mat-select-216" aria-owns="mat-select-216" style="">
         <!---->
         <mat-label _ngcontent-dgg-c495="" class="ng-tns-c66-377 ng-star-inserted">Adjustment Reason</mat-label>
         <!----><!---->
      </label>
      <!---->
   </span>
</div>

问题描述 #

希望通过mat-label的文本内容定位对应的mat-select元素，尝试following、following-sibling、descendant等XPath轴未成功，当前可用方案为：
//mat-label[text()='Adjustment Reason']/ancestor::node()[3]/mat-select
但依赖固定层级的ancestor写法不够稳健，需优化XPath路径。

优化方案 #

以下几种写法均不依赖固定DOM层级，稳定性更强：

1. 利用表单元素的for与id关联（最推荐） #

Angular Material会自动为label的for属性绑定对应表单控件的id，基于这个原生关联逻辑定位：

//mat-select[@id = //mat-label[text()='Adjustment Reason']/parent::label/@for]

逻辑：先找到文本为"Adjustment Reason"的mat-label，取其父元素label的for属性值，再匹配拥有对应id的mat-select。

2. 基于共同父容器定位 #

直接定位到包含mat-form-field-infix类的共同祖先容器，再在容器内查找mat-select：

//mat-label[text()='Adjustment Reason']/ancestor::div[contains(@class, 'mat-form-field-infix')]/mat-select

逻辑：找到目标mat-label后，向上查找带有mat-form-field-infix类的最近div父容器，再在该容器内获取mat-select，无需关心中间层级变化。

3. 利用无障碍属性aria-labelledby关联 #

mat-select的aria-labelledby属性会引用对应label的id，基于无障碍规范的关联定位：

//mat-select[contains(@aria-labelledby, //mat-label[text()='Adjustment Reason']/parent::label/@id)]

逻辑：获取目标mat-label父元素label的id，再匹配aria-labelledby属性包含该id的mat-select。

内容的提问来源于stack exchange，提问作者Prox