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为Ability to Add/Remove Queues的输入找到包含functionId13的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']

//input[@id='functionId13']选择输入
/../..升至第一个td
/following-sibling::td[1]给出当前节点之后的td
和/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 Selector，你将无法获得它，因为它不支持这种需求。

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

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

或者你可以使用findElements（）获取所有div并循环它们以找到具有你需要的文本的元素。

使用CSS选择器查找具有棘手关系的WebElements

2 个答案: