javascript - 在搜索兄弟时使用 CSS 选择器而不是 XPath 定位器

Question

目前，我有以下页面对象字段:

this.filterTeamDropdown = $("filter-item-edit .dropdown button");
this.teams = this.filterTeamDropdown.all(by.xpath("following-sibling::ul//li[contains(@class, 'dropdown-list-item')]"));

有没有办法替换 teams 字段的 XPath 定位器并改为使用 CSS 选择器？

---

它的动机来自 Style Guide和 recommendation not to use XPaths .

据我了解，不可能让 CSS 选择器从上下文中的当前元素开始转到下一个兄弟元素。但是，还有其他选择吗？

Answer 1

对任何事情说“永不”是愚蠢的。我非常喜欢 CSS 选择器，因为通过 id 定位元素、CSS 选择器，几乎任何东西……都比 XPath 快。但是...与此同时，我们正在谈论几毫秒的差异。

XPath 可以做一些其他定位器方法做不到的事情。一个想到的例子是通过包含的元素文本查找元素(A 除外)。除此之外，当 ID 不起作用时，我通常会坚持使用 CSS 选择器。

我非常不喜欢很多人在 SO 上的定位器策略，因为 XPath 似乎是查找元素的 goto 方法，以至于它很愚蠢。我见过人们只寻找一个 id 并使用 XPath。我认为部分原因是您可以获得 XPath，右键单击检查器中的元素并复制 XPath 并粘贴到代码中。问题在于，我相信您知道，有时(很多次？)这会导致非常脆弱的 XPath，但一些/许多人并不清楚。

综上所述，我将向您指出 W3C CSS 选择器引用，也许您可​​以找到您要查找的内容。那里有一些兄弟组合器，但我没有您的 HTML，所以我不知道它们中的哪一个(如果有的话)可以工作。

https://www.w3.org/TR/selectors/#selectors

https://www.w3.org/TR/selectors/#adjacent-sibling-combinators

---

我刚刚阅读了您问题下方的一些评论，发现您已经了解 + 组合器。有什么原因不能将初始定位器 CSS 与 XPath 转换后的字符串一起使用吗？我不知道这是否有效/可用，但在将 XPath 转换为 CSS 选择器后，我将您在代码中提供的两个定位器组合在一起。

filter-item-edit .dropdown button + ul li.dropdown-list-item