How to select the first option in a radio button group with selenium when its ID changes with every-CodePudding

I am writing a test automation solution with Selenium in Java.

I want to select to first option in a radio button group on my page. The HTML id and content of these options are dynamically generated. The options belong to a radio button group with data-cy=tv-select and name=selectTv.

How can I select the first option in this radio button group?

EDIT This is the html code:

<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>

I am interested in the radio button with ID mat-radio-8-input, but that ID changes with every new test run.

This is how I identify my radio button group:

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

How can I select the first option of this group?

CodePudding user response：

You can do this simply by executing a JS code on the page. Just inspect the target page to find a unique selector for the radio button and set selector.checked = true; using js...
For example, if my radio button have id mat-radio-9, I can use js code :- document.getElementById("mat-radio-9").checked = true;
Check Out These Questions :-