Question

我正在使用包含在 PHPUnit 和 Sausage 中的 Selenium WebDriver 来测试单击表格中特定行中的按钮到：

<tr id="dynamically generated 1">
    <td class="foo">
        <div class="bar"></div>
    </td>
    <td class = "mybutton">
        <span class = "icon clickable"></span>
    </td>
</tr>
<tr id="dynamically generated 2">
    <td class="foo">
        <div class="baz"></div>
    </td>
    <td class = "mybutton">
        <span class = "icon clickable"></span>
    </td>
</tr>

特别是，我想点击一个特定元素#mybutton > span.icon.clickable，其兄弟.foo与子.baz。 “其兄弟.foo带有子.baz ”要求是我目前唯一可以识别正确元素的方法，因为同一个表中的其他行都有元素{{1这些行的ID是动态生成的。

目前我正在使用XPath，但正如您所料，#mybutton > span.icon.clickable和FF上的效果非常糟糕。有没有从元素IE中检索tr#id的值的方法？如果我能得到这个，我可以使用id来使用CSS来查找我正在寻找的元素。我使用的是PHP，但任何语言的解决方案都很有用。

或者，一个更直接的CSS3解决方案可以工作，但经过相当多的阅读后，我几乎得出结论，使用标准的CSS3选择器不是这种情况的选项。为了防止我缺少某些东西，是否有针对此的CSS3解决方案？我知道有一个CSS4解决方案，但我需要完整的浏览器支持，所以在我测试支持CSS4的所有浏览器之前，我将不得不依赖CSS3。

提前致谢。

编辑：直到有更好的跨浏览器支持CSS4，我需要使用CSS3

Answer 1

我能想到的唯一方法是找到由List<WebElement>生成的By.cssSelector(".foo~span.icon.clickable")，并在每个元素上执行findElement(By.cssSelector(".baz"))包围try / catch（捕获NoSuchElementException } S）。

如果没有抛出错误，那么您就知道找到了自己的元素。

注意：如果~有任何正在进行的.foo兄弟姐妹，+会选择它。如果您希望它是前一个兄弟姐妹，请使用{{1}}

Answer 2

没有CSS方法可以选择它，因为它需要一个查看前面元素的选择器，这在CSS3中是不可用的。

然而，这在jQuery中会非常简单。我为你的情况做了一个选择器

$(".foo").has(".baz").siblings(".mybutton").find("span.icon.clickable").addClass('red');

$(".foo") - 选择类foo
.has(".baz") - 仅返回具有类baz的兄弟的元素。在这种情况下，.foo带有.baz元素
.siblings(".mybutton") - 在与前一个元素相同的级别上查找类mybutton的元素。由于我们使用的是has()而不是.foo .baz，因此仍将定位.foo元素
.find("span.icon.clickable") - 查找上一个元素的下降范围，其中包含icon和clickable
.addClass('red'); - 只是完成示例的功能

Fiddle

Answer 3

css中有一个名为~的兄弟选择器，并且有一些css4选择器可能有所帮助。

如果我理解正确的要求，也许这会奏效：

#mybutton > .foo ~ span.icon.clickable! > .baz

这应该在chrome中工作，但是它的css4所以，它可能不适用于很多浏览器。

提示：选择有{child} span.icon.clickable的{{1}}

从child css元素获取特定css元素id的值

3 个答案: