Question

<a id="inbox_row_container_24_112" class="inbox_row_container row_even" href="javascript:void(0)">
   <span id="inbox_message_24_112" class="inbox_message">
   <span id="inbox_message_attributes_24_112" class="inbox_message_attributes">
   <span id="inbox_message_attachment_24_112" class="inbox_message_attachment">*</span>
   <span class="inbox_row_clear"></span>
</a>

在上面，我想获得“inbox_row_container_24_112”，如果它的层次结构中有id =“inbox_message_attachment_24_112”的元素。

有人可以建议如何做到这一点吗？

Answer 1

你有什么理由想使用CSS吗？这非常适合xpath;

//a[@id="inbox_row_container_24_112" and span[@id="inbox_message_attachment_24_112"]]

或者如果你想丢失标签限制;

//*[@id="inbox_row_container_24_112" and *[@id="inbox_message_attachment_24_112"]]

Selenium支持Xpath和CSS，你应该选择一个满足你情况需要的选择器，在这种情况下，Xpath似乎比CSS更适合

Answer 2

听起来你正在寻找一个父选择器，AKA找到$（'＃inbox_message_attachment_24_112'）并转到它的父级。不幸的是，CSS没有这个。

类似的问题： CSS selector for "foo that contains bar"?

其中一个答案建议在jquery中使用它：

$('#parent:has(#child)');

我建议从那里开始！：）

Answer 3

您可以考虑使用Helium - Selenium WebDriver包装器，它提供类似jQuery的选择器作为其API的一部分。

假设您在Java中使用WebDriver，可以尝试以下代码：

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import static com.heliumhq.API.*;

public class MyElementFinder {
    public WebElement findMyElement() {
        startChrome("YOUR-URL-HERE");
        $ inboxMessageAttachment = $("#inbox_row_container_24_112 #inbox_message_attachment_24_112");
        WebElement elem = inboxMessageAttachment.getWebElement();
        do {
            elem = elem.findElement(By.xpath("parent::node()"));
        } while (!elem.getAttribute("id").equals("inbox_row_container_24_112"));
        return elem;
    }
}

请注意，您的HTML代码不是100％有效 - 其中两个<span>代码没有相应的结束标记</span>。如果HTML代码已更正并显示如下：

<a id="inbox_row_container_24_112" class="inbox_row_container row_even" href="javascript:void(0)">
   <span id="inbox_message_24_112" class="inbox_message"></span>
   <span id="inbox_message_attributes_24_112" class="inbox_message_attributes"></span>
   <span id="inbox_message_attachment_24_112" class="inbox_message_attachment">*</span>
   <span class="inbox_row_clear"></span>
</a>

然后氦气脚本会更短更好：

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import static com.heliumhq.API.*;

public class MyElementFinder {
    public WebElement findMyElement() {
        startChrome("YOUR-URL-HERE");
        $ inboxMessageAttachment = $("#inbox_row_container_24_112 > #inbox_message_attachment_24_112");
        return inboxMessageAttachment.getWebElement().findElement(By.xpath("parent::node()"));
    }
}

在上面的两个例子中，如果不存在这样的元素，findMyElement（）方法抛出NoSuchElementException类型的异常 - 这可以用来处理当没有这样的元素时的情况。

免责声明：我是Helium的开发人员之一

Answer 4

您只能使用CSS访问孩子：

#inbox_row_container_24_112 > #inbox_message_attachment_24_112

但是，一旦您选择了孩子，就无法获得父母但是，使用JavaScript这将是一个很容易解决的问题。

css选择器，在其层次结构中具有特定属性的元素

4 个答案: