0

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?

diher81
  • 5
  • 3

2 Answers2

0
  • 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 :- Executing js code Check a radio button in js
Devyash Saini
  • 1
  • 5
  • Please read my question more carefully. The id of my radio button is generated on the fly, so I don't know upfront what it will be. – diher81 Oct 03 '21 at 07:19
  • Then you can select the nth child of the element with Name=selectTv – Devyash Saini Oct 03 '21 at 08:59
  • But surely there must be a way to accomplish this without javascript? I am using Selenium with Java. – diher81 Oct 03 '21 at 09:54
  • Please check out my updated question. Thanks in advance. – diher81 Oct 03 '21 at 10:00
  • instead of `@FindBy(how = CSS, using = "mat-radio-group[data-cy='tv-select']") private List tv;` you can try directly selecting the radio button with class mat-radio-input and then select the first element from it ? as told by @lucasnguyen17 – Devyash Saini Oct 03 '21 at 11:32
0

You can do this:

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

To get first item:

WebElement firstRadioBtn = radioBtns.get(0);

enter image description here

lucas-nguyen-17
  • 5,516
  • 2
  • 9
  • 20