2

我正在使用封装在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同级为.foochild的特定元素.baz。“其兄弟姐妹.foo与孩子.baz”要求是我目前可以识别正确元素的唯一方法，因为同一个表中的其他行具有 element #mybutton > span.icon.clickable，并且这些行的 id 是动态生成的。

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

或者，一个更直接的 CSS3 解决方案可以工作，但经过大量阅读后，我几乎得出结论，在这种情况下使用标准 CSS3 选择器不是一个选项。以防万一我遗漏了什么，是否有针对此的 CSS3 解决方案？我知道有一个 CSS4 解决方案，但我需要完整的浏览器支持，所以在我测试的所有浏览器都支持 CSS4 之前，我将不得不依赖 CSS3。

提前致谢。

编辑：在对 CSS4 有更好的跨浏览器支持之前，我需要使用 CSS3

4

3 回答 3

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")- 查找前一个元素的降序跨度，其类为iconandclickable
  • .addClass('red');- 只是一个完成示例的函数

小提琴

于 2013-08-02T21:55:06.073 回答
2

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

当没有抛出错误时，你就知道你已经找到了你的元素。

注意：~如果它有任何进行中的.foo兄弟姐妹，则选择它。如果您希望它成为前一个兄弟姐妹，请使用+

于 2013-08-02T21:30:47.303 回答
1

在 css 中有一个兄弟选择器被调用~，并且有一些css4选择器可能会有所帮助。

如果我正确理解了要求，也许这会起作用：

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

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

提示：它选择span.icon.clickable哪个有一个孩子.baz

于 2013-08-02T21:23:02.303 回答