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

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

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

问题

Html block first:

<div class="formClass" style="line-height: 18px; display: block;">

    <label id="randomId_34_30078" style="display: none; width:47%; margin-right: 5px;">
        <input type="checkbox" value="30078" disabled="">First Text
    </label>

    <label id="randomId_34_30077" style="display: none; width:47%; margin-right: 5px;">
        <input type="checkbox" value="30077" disabled="">Second Text
    </label>
    
    <label id="randomId_32_30078" style="display: inline-block; width:47%; margin-right: 5px; vertical-align: top;">
        <div style="display: inline-block; width: 10%; float: left;">
            <input type="checkbox" value="30078" disabled="" checked="">
        </div>
        <div style="display: inline-block; width: 90%; float: right;">
            First Text
        </div>
    </label>

    <label id="randomId_32_30077" style="display: inline-block; width:47%; margin-right: 5px; vertical-align: top;">
        <div style="display: inline-block; width: 10%; float: left;">
            <input type="checkbox" value="30077" disabled="">
        </div>
        <div style="display: inline-block; width: 90%; float: right;">
            Second Text
        </div>
    </label>

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

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

but this gets two elements.

英文:

Html block first:

&lt;div class=&quot;formClass&quot; style=&quot;line-height: 18px; display: block;&quot;&gt;

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

    &lt;label id=&quot;randomId_34_30077&quot; style=&quot;display: none; width:47%; margin-right: 5px;&quot;&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;30077&quot; disabled=&quot;&quot;&gt;Second Text
    &lt;/label&gt;
    
    &lt;label id=&quot;randomId_32_30078&quot; style=&quot;display: inline-block; width:47%; margin-right: 5px; vertical-align: top;&quot;&gt;
        &lt;div style=&quot;display: inline-block; width: 10%; float: left;&quot;&gt;

             &lt;input type=&quot;checkbox&quot; value=&quot;30078&quot; disabled=&quot;&quot; checked=&quot;&quot;&gt;

        &lt;/div&gt;
        &lt;div style=&quot;display: inline-block; width: 90%; float: right;&quot;&gt;
            First Text
        &lt;/div&gt;
    &lt;/label&gt;

    &lt;label id=&quot;randomId_32_30077&quot; style=&quot;display: inline-block; width:47%; margin-right: 5px; vertical-align: top;&quot;&gt;
        &lt;div style=&quot;display: inline-block; width: 10%; float: left;&quot;&gt;
            
            &lt;input type=&quot;checkbox&quot; value=&quot;30077&quot; disabled=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div style=&quot;display: inline-block; width: 90%; float: right;&quot;&gt;
            Second Text
        &lt;/div&gt;
    &lt;/label&gt;

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

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

but this gets two elements.

答案1

得分: 0

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

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

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

您可以使用:

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

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

you can use

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

答案2

得分: 0

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

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

  • cssSelector
WebElement element = new WebDriverWait(webDriver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("label[id^='randomId'] input[value='30078']")));
  • xpath
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:

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

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

发表评论

匿名网友

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

确定