如何 select 使用 selenium 的单选按钮组中的第一个选项，当它的 ID 随每次新页面加载而变化时

Question

我正在 Java.

中使用 Selenium 编写测试自动化解决方案

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

的单选按钮组

如何select这个单选按钮组中的第一个选项？

编辑这是 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;

如何才能select这个组的第一个选项？

Answer 1

您只需在页面上执行一段JS代码即可。只需检查目标页面，找到单选按钮的唯一选择器并设置 selector.checked = true；使用 js...
例如，如果我的单选按钮有 id mat-radio-9，我可以使用 js 代码：- document.getElementById("mat-radio-9").checked = true;
检查这些问题：- Executing js code Check a radio button in js

Answer 2

你可以这样做：

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

获取第一项：

WebElement firstRadioBtn = radioBtns.get(0);

如何 select 使用 selenium 的单选按钮组中的第一个选项，当它的 ID 随每次新页面加载而变化时

How to select the first option in a radio button group with selenium when its ID changes with every new page load

selenium

radio-group