Iterate over radio buttons and click-CodePudding

I have this html code which holds radio buttons:

<mobileweb-group-toggle _ngcontent-oil-c35="" id="searchType" _nghost-oil-c36="">
   <!---->
   <div _ngcontent-oil-c36="" class="datex-form-field">
      <!----><!---->
      <mat-radio-group _ngcontent-oil-c36="" class="ng-pristine ng-valid ng-star-inserted ng-touched" role="radiogroup" id="searchType.toggle">
         <!---->
         <mat-radio-button _ngcontent-oil-c36="" class="datex-radiobutton mat-radio-button mat-accent mat-radio-checked ng-star-inserted" tabindex="-1" id="mat-radio-5">
            <label class="mat-radio-label" for="mat-radio-5-input">
               <div class="mat-radio-container">
                  <div class="mat-radio-outer-circle"></div>
                  <div class="mat-radio-inner-circle"></div>
                  <div class="mat-radio-ripple mat-ripple" mat-ripple="">
                     <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
                  </div>
                  <input class="mat-radio-input cdk-visually-hidden" type="radio" id="mat-radio-5-input" tabindex="0" name="mat-radio-group-3">
               </div>
               <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Shipment</div>
            </label>
         </mat-radio-button>
         <mat-radio-button _ngcontent-oil-c36="" class="datex-radiobutton mat-radio-button mat-accent ng-star-inserted" tabindex="-1" id="mat-radio-6">
            <label class="mat-radio-label" for="mat-radio-6-input">
               <div class="mat-radio-container">
                  <div class="mat-radio-outer-circle"></div>
                  <div class="mat-radio-inner-circle"></div>
                  <div class="mat-radio-ripple mat-ripple" mat-ripple="">
                     <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
                  </div>
                  <input class="mat-radio-input cdk-visually-hidden" type="radio" id="mat-radio-6-input" tabindex="0" name="mat-radio-group-3">
               </div>
               <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Work Order</div>
            </label>
         </mat-radio-button>
      </mat-radio-group>
   </div>
</mobileweb-group-toggle>

How I can iterate over the parent node and click on the first or the second node no matter wha tid the ID of the radio buttons?

CodePudding user response：

I assume that you should click on mat-radio-inner-circle element inside the mat-radio-button block to select that radio button. If so you can do the following:

List<WebElement>list = driver.findElements(By.xpath("//*[contains(@class,'datex-radiobutton mat-radio-button')]//div[@class='mat-radio-inner-circle']"));

Now, in order to click the first radio button you should perform:

list.get(0).click();

In order to click the second radio button

list.get(1).click();

etc.
In case the element accepting the click is different - change the XPath accordingly

CodePudding user response：

Xpath would be "//type[@radio][1]" or "//type[@radio][2]", as you wish.