Selenium：如何通过 div 和 label 从嵌套的 input 获取已选中的复选框？

huangapple
go评论114阅读模式
英文:

Selenium: How can I get the checked checkbox from nested input by div and label?

问题

Html block first:

  1. <div class="formClass" style="line-height: 18px; display: block;">
  3.     <label id="randomId_34_30078" style="display: none; width:47%; margin-right: 5px;">
  4.         <input type="checkbox" value="30078" disabled="">First Text
  5.     </label>
  7.     <label id="randomId_34_30077" style="display: none; width:47%; margin-right: 5px;">
  8.         <input type="checkbox" value="30077" disabled="">Second Text
  9.     </label>
  10.     
  11.     <label id="randomId_32_30078" style="display: inline-block; width:47%; margin-right: 5px; vertical-align: top;">
  12.         <div style="display: inline-block; width: 10%; float: left;">
  13.             <input type="checkbox" value="30078" disabled="" checked="">
  14.         </div>
  15.         <div style="display: inline-block; width: 90%; float: right;">
  16.             First Text
  17.         </div>
  18.     </label>
  20.     <label id="randomId_32_30077" style="display: inline-block; width:47%; margin-right: 5px; vertical-align: top;">
  21.         <div style="display: inline-block; width: 10%; float: left;">
  22.             <input type="checkbox" value="30077" disabled="">
  23.         </div>
  24.         <div style="display: inline-block; width: 90%; float: right;">
  25.             Second Text
  26.         </div>
  27.     </label>
  29. </div>

I'd like to get the checkbox of which the value is "30078" in the above HTML section. The id of labels are random, also the value of the input/checkbox. It's a legacy project. I can't modify the structure.

I tried this:

  1. driver.findElement(By.className("formClass"))
  2.                     .findElement(By.xpath("//label//div[contains(text(), 'First Text')]"))

but this gets two elements.

英文:

Html block first:

  1. &lt;div class=&quot;formClass&quot; style=&quot;line-height: 18px; display: block;&quot;&gt;
  3.     &lt;label id=&quot;randomId_34_30078&quot; style=&quot;display: none; width:47%; margin-right: 5px;&quot;&gt;
  4.         &lt;input type=&quot;checkbox&quot; value=&quot;30078&quot; disabled=&quot;&quot;&gt;First Text
  5.     &lt;/label&gt;
  7.     &lt;label id=&quot;randomId_34_30077&quot; style=&quot;display: none; width:47%; margin-right: 5px;&quot;&gt;
  8.         &lt;input type=&quot;checkbox&quot; value=&quot;30077&quot; disabled=&quot;&quot;&gt;Second Text
  9.     &lt;/label&gt;
  10.     
  11.     &lt;label id=&quot;randomId_32_30078&quot; style=&quot;display: inline-block; width:47%; margin-right: 5px; vertical-align: top;&quot;&gt;
  12.         &lt;div style=&quot;display: inline-block; width: 10%; float: left;&quot;&gt;
  14.              &lt;input type=&quot;checkbox&quot; value=&quot;30078&quot; disabled=&quot;&quot; checked=&quot;&quot;&gt;
  16.         &lt;/div&gt;
  17.         &lt;div style=&quot;display: inline-block; width: 90%; float: right;&quot;&gt;
  18.             First Text
  19.         &lt;/div&gt;
  20.     &lt;/label&gt;
  22.     &lt;label id=&quot;randomId_32_30077&quot; style=&quot;display: inline-block; width:47%; margin-right: 5px; vertical-align: top;&quot;&gt;
  23.         &lt;div style=&quot;display: inline-block; width: 10%; float: left;&quot;&gt;
  24.             
  25.             &lt;input type=&quot;checkbox&quot; value=&quot;30077&quot; disabled=&quot;&quot;&gt;
  26.         &lt;/div&gt;
  27.         &lt;div style=&quot;display: inline-block; width: 90%; float: right;&quot;&gt;
  28.             Second Text
  29.         &lt;/div&gt;
  30.     &lt;/label&gt;
  32. &lt;/div&gt;

I'd like to get the checkbox of which the value is "30078" in the above HTML section.
The id of labels are random, also the value of the input/checkbox. It's a legacy project. I can't modify the structure.

I tried this:

  1. driver.findElement(By.className(&quot;formClass&quot;))
  2.                     .findElement(By.xpath(&quot;//label//div[contains(text(), &#39;First Text&#39;)]&quot;))

but this gets two elements.

答案1

得分: 0

如果您需要获取复选框，您需要为<input>标签编写XPATH。

如果您需要为以下内容编写xpath：

  1.  &lt;label id=&quot;randomId_34_30078&quot; style=&quot;display: none; width:47%; margin-right: 5px;&quot;&gt;
  2.     &lt;input type=&quot;checkbox&quot; value=&quot;30078&quot; disabled=&quot;&quot;&gt;First Text
  3. &lt;/label&gt;

您可以使用：

  1. //div[@class=&quot;formClass&quot;]/label/input[contains(text(),&quot;First Text&quot;)]
英文:

If you need to get the checkbox, you need to write the XPATH for the <input> tag.

If you need to write the xpath for below :

  1.  &lt;label id=&quot;randomId_34_30078&quot; style=&quot;display: none; width:47%; margin-right: 5px;&quot;&gt;
  2.     &lt;input type=&quot;checkbox&quot; value=&quot;30078&quot; disabled=&quot;&quot;&gt;First Text
  3. &lt;/label&gt;

you can use

  1. //div[@class=&quot;formClass&quot;]/label/input[contains(text(),&quot;First Text&quot;)]

答案2

得分: 0

虽然有两个带有属性 value="30078" 的元素，但其中只有一个是可见的，而另一个包含属性 style="display: none;"。

因此，要获取具有设置为 30078 的 value 属性的可见/可交互复选框，您需要使用 WebDriverWait 来等待 elementToBeClickable()，并且您可以使用以下任一 定位策略：

  • cssSelector：
  1. WebElement element = new WebDriverWait(webDriver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("label[id^='randomId'] input[value='30078']")));
  • xpath：
  1. WebElement element = new WebDriverWait(webDriver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[starts-with(@id, 'randomId')]//input[@value='30078']")));
英文:

Though there are two elements with attribute value=&quot;30078&quot; among them only one is visible while the other one contains the attribute style=&quot;display: none;.

So to get the visible/interactable checkbox with value attribute set as 30078 you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

  • cssSelector:

    1. WebElement element = new WebDriverWait(webDriver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector(&quot;label[id^=&#39;randomId&#39;] input[value=&#39;30078&#39;]&quot;)));

  • xpath:

    1. WebElement element = new WebDriverWait(webDriver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath(&quot;//label[starts-with(@id, &#39;randomId&#39;)]//input[@value=&#39;30078&#39;]&quot;)));

References

You can find a couple of relevant discussions in:

huangapple
  • 本文由 发表于 2020年8月21日 14:14:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/63517428.html
  • css-selectors
  • java
  • selenium
  • webdriverwait
  • xpath
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定