java - 无法使用相对定位器单击第二个复选框

Question

我有以下 HTML 代码

<div class="compatible-product ng-star-inserted">
  <adapt-checkbox2 class="checkbox ng-valid ng-star-inserted ng-dirty ng-touched" ng-reflect-model="false">
    <label class="checkbox__label" for= "adapt-checkbox-453-input">              
      <input class="checkbox__input" type="checkbox" id="adapt-checkbox-453-input" tabindex="0" aria-label="" aria-checked="false">
      <span class="checkbox__item"> 
         <span class="sr-only" ng-reflect-ng-class="[object Object]"></span>             
      </span>
    </label>
  </adapt-checkbox2>
  <span class="compatible-product-name" style="">Product - ABC</span>
</div>
<div class="compatible-product ng-star-inserted">
  <adapt-checkbox2 class="checkbox ng-untouched ng-pristine ng-valid ng-star-inserted">
    <label class="checkbox__label" for="adapt-checkbox-454-input">           
      <input class="checkbox__input" type="checkbox" id="adapt-checkbox-454-input" tabindex="0" aria-label="" aria-checked="false">
      <span class="checkbox__item">
        <span class="sr-only" ng-reflect-ng-class="[object Object]"></span>              
      </span>
    </label>
  </adapt-checkbox2>
  <span class="compatible-product-name" style="">Product - XYZ</span>
</div>

Please check screenshot here

来自哪1)首先，我需要选择/单击“adapt-checkbox2”，剩下的就是“Product - ABC”所以我写了如下代码

WebElement selectCompatibleProduct1 = driver.findElement(RelativeLocator.withTagName("adapt-checkbox2").toLeftOf(By.xpath("//*[text()='Product - ABC']")));
    selectCompatibleProduct1.click();

运行良好。它选择了正确的复选框。

2)但是每当我尝试选择第二个复选框时它就不起作用。再次单击/选择第一个复选框。第二个复选框的代码是:-

WebElement selectCompatibleProduct2 = driver.findElement(RelativeLocator.withTagName("adapt-checkbox2").toLeftOf(By.xpath("//*[text()='Product - XYZ']")));
selectCompatibleProduct2.click();

Selenium 版本是:- 4.0.0-alpha-3请有人帮我解决这个问题吗？提前致谢。

Answer 1

第一个<adapt-checkbox2>被视为位于带有文本 'Product - XYZ' 的元素的左侧。 Sinct 它是被返回的 Dom 层次结构中的第一个。你可以加 .below()提供更精确的位置

WebElement selectCompatibleProduct2 = driver.findElement(
                                      RelativeLocator.withTagName("adapt-checkbox2")
                                      .toLeftOf(By.xpath("//*[text()='Product - XYZ']"))
                                      .below(By.xpath("//adapt-checkbox2/following-sibling::span[text()='Product - ABC']")));

在这种情况下，使用 xpath 会更简单。

WebElement selectCompatibleProduct2 = driver.findElement(By.xpath("//adapt-checkbox2[./following-sibling::span[text()='Product - XYZ']]"));