使用具有复杂关系的 CSS 选择器查找 WebElement

Question

我正在尝试根据其相邻文本单击复选框。然而，页面结构使它变得相当困难。问题是事物嵌套在嵌套在 div 等中的表中。有问题的代码部分如下所示：

<tr id="yui-rec62" class="yui-dt-first yui-dt-even" style="">
    <td class="yui-dt25-col-access yui-dt-col-access yui-dt-first" headers="yui-dt25-th-access ">
        <div class="yui-dt-liner">
            <input id="functionId13" type="checkbox" value="13" name="functionId">
        </div>
    </td>
    <td class="yui-dt25-col-name yui-dt-col-name yui-dt-last" headers="yui-dt25-th-name ">
        <div class="yui-dt-liner">Ability to Add/Remove Queues</div>
    </td>
</tr>

我需要能够通过 ID 为 functionId13 的输入找到包含 Ability to Add/Remove Queues 的 div。这导致了这样的检查：

if(div has text of "Ability to Add/remove Queues"){
    return the WebElement of the check box associated with it
}

我有一个所有复选框及其 ID 的列表，我只是想不出一种方法来将它们与它们的描述性文本相匹配。

Answer 1

有no parent selector in CSS，如果你想选择它，你需要一个，但你可以用 XPath 做到这一点：

//input[@id='functionId13']/../../following-sibling::td[1]/div[@class='yui-dt-liner']

1. //input[@id='functionId13'] 选择输入
2. /../.. 上升到第一个 td
3. /following-sibling::td[1] 给出当前节点后的 td
4. 和/div[@class='yui-dt-liner']选择第二个td中的div

在java中它看起来像这样：

boolean found = false;
for(String id : idList) {
    WebElement el = driver.findElement(By.xpath("//input[@id='"+id+"']/../../following-sibling::td[1]/div[@class='yui-dt-liner']"));
    if (el.getText().indexOf("Ability to Add/remove Queues") != -1) {
        found = true;
        break;
    }
}
// do something with `found`

向后执行的 XPath 如下所示：

WebElement input = driver.findElement(By.xpath(
    "//div[contains(text(),'Ability to Add/Remove Queues')]"+
    "/../preceding-sibling::td[1]"+
    "//input[@name='functionId']"
));

Answer 2

使用 CSS 选择器你将无法获得它，因为它不支持这种需求。

唯一一种简单的方法是使用 XPath，如下所示。

WebElement yourElement = driver.findElement(By.xpath("//div[contains(text(),'Ability to Add/Remove Queues')]");

或者您可以使用 findElements() 获取所有 div 并循环它们以查找具有所需文本的元素。