selenium - 当每次新页面加载时其 ID 更改时，如何使用 selenium 选择单选按钮组中的第一个选项

Question

我正在用 Java 中的 Selenium 编写测试自动化解决方案。

我想选择页面上单选按钮组中的第一个选项。这些选项的 HTML id 和内容是动态生成的。这些选项属于带有data-cy=tv-select和的单选按钮组name=selectTv。

如何选择此单选按钮组中的第一个选项？

编辑这是html代码：

<section _ngcontent-hqh-c168="">
  <span _ngcontent-hqh-c168="">
    <vi-select-tv _ngcontent-hqh-c168="" _nghost-hqh-c167="">
      <mat-radio-group _ngcontent-hqh-c167="" role="radiogroup" name="selectTv" data-cy="tv-select"
                       class="mat-radio-group tvken-select ng-pristine ng-valid ng-star-inserted ng-touched">
        <mat-radio-button _ngcontent-hqh-c167="" class="mat-radio-button mat-accent ng-star-inserted" id="mat-radio-8">
          <label class="mat-radio-label" for="mat-radio-8-input">
            <span class="mat-radio-container">
              <span class="mat-radio-outer-circle"></span>
              <span class="mat-radio-inner-circle">
            </span>
            <input type="radio"
                   class="mat-radio-input cdk-visually-hidden"
                   id="mat-radio-8-input"
                   tabindex="0"
                   name="selectTv"
                   value="NIEUW_a11fd55d-5792-4f19-8764-ccb188d20591">
              <span mat-ripple="" class="mat-ripple mat-radio-ripple mat-focus-indicator">
                <span class="mat-ripple-element mat-radio-persistent-ripple">
                </span>
              </span>
            </span>
            <span class="mat-radio-label-content">
              <span style="display: none;">&nbsp;</span>tv 1: 02-10-2021 13:20 tot 02-10-2021 15:20</span>
          </label>
        </mat-radio-button>
        <mat-radio-button _ngcontent-hqh-c167="" class="mat-radio-button mat-accent ng-star-inserted mat-radio-checked"
                          id="mat-radio-9">
          <label class="mat-radio-label" for="mat-radio-9-input">
            <span class="mat-radio-container">
              <span class="mat-radio-outer-circle"></span>
              <span class="mat-radio-inner-circle"></span>
              <input type="radio"
                     class="mat-radio-input cdk-visually-hidden"
                     id="mat-radio-9-input"
                     tabindex="0"
                     name="selectTv"
                     value="new">
              <span mat-ripple="" class="mat-ripple mat-radio-ripple mat-focus-indicator">
                <span class="mat-ripple-element mat-radio-persistent-ripple"></span>
              </span>
            </span>
            <span class="mat-radio-label-content">
        <span style="display: none;">&nbsp;</span>NEW</span></label>
      </mat-radio-button>
      </mat-radio-group>
    </vi-select-tv>
  </span>
</section>

我对 ID 为 mat-radio-8-input 的单选按钮感兴趣，但该 ID 会随着每次新的测试运行而改变。

这就是我识别单选按钮组的方式：

@FindBy(how = CSS, using = "mat-radio-group[data-cy='tv-select']")
    private List<WebElement> tv;

如何选择该组的第一个选项？

标签： seleniumradio-group

Answer 1

你可以这样做：

@FindBy(how = CSS, using = "mat-radio-group[data-cy='tv-select'] mat-radio-button")
private List<WebElement> radioBtns;

要获得第一个项目：

WebElement firstRadioBtn = radioBtns.get(0);