遍历单选按钮并单击答案

【问题标题】：Iterate over radio buttons and click遍历单选按钮并单击
【发布时间】：2021-12-23 11:26:40
【问题描述】：

我有这个包含单选按钮的 html 代码：

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

无论单选按钮的 ID 是什么，我如何遍历父节点并单击第一个或第二个节点？

【问题讨论】：

怎么样：driver.findElements(By.xpath("xpath_of_radio_options")); 这将为您提供收音机列表，您可以使用Random 选择其中一个并单击它。
我只需要点击第一个或只点击第二个。不是随机的单选按钮。

标签： java selenium selenium-webdriver xpath selenium-chromedriver

【解决方案1】：

我假设您应该单击mat-radio-button 块内的mat-radio-inner-circle 元素来选择该单选按钮。如果是这样，您可以执行以下操作：

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

现在，为了单击第一个单选按钮，您应该执行以下操作：

list.get(0).click();

为了点击第二个单选按钮

list.get(1).click();

等
如果接受点击的元素不同 - 相应地更改 XPath

【讨论】：

不幸的是我收到了org.openqa.selenium.ElementNotInteractableException: element not interactable: element has zero size
在访问该元素之前尝试设置一些延迟。看起来您试图在该元素尚未完全呈现时访问它。
如何在上面的代码中添加监听器？
我不是说听众。为什么不在那里睡几秒钟呢？如果这解决了问题 - 那么您可以考虑如何使它更优雅。通常显式等待（预期条件）元素可见/可点击是最好的方法。

【解决方案2】：

Xpath 会是

//type[@radio][1] or //type[@radio][2]

如你所愿。

【讨论】：

你能把答案扩展一点吗？