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）首先，我需要选择/单击留给Span“产品-ABC”的“ adapt-checkbox2” 所以我写了如下代码

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();

硒版本为：-4.0.0-alpha-3 请有人可以帮我吗？预先感谢。

Answer 1

第一个h = days.each_with_object({}) { |inst,h| h[inst.name] = inst }. tap { |h| h.default_proc = ->(h,d) { h[d] = Day.new(d,0) }被认为是带有文本<adapt-checkbox2>的元素的左侧。肯定这是它返回的Dom层次结构中的第一个。你可以加 'Product - XYZ'提供更精确的位置

.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

Answer 2

使用此CSS选择器

产品-ABC 定位器 label> input＃adapt-checkbox-453-input

产品-XYZ 下面的CSS定位器 label> input＃adapt-checkbox-454-input

Answer 3

产品-ABC： driver.findElements（By.xpath（“ // span [@ class ='compatible-product-name']”）[1]

产品-XYZ： driver.findElements（By.xpath（“ // span [@ class ='compatible-product-name']”）[2]

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

3 个答案: