在搜索兄弟姐妹时使用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选择器？

---

它的动机来自风格指南和不使用XPath的建议.

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

Answer 1

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

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

我非常不喜欢很多人在SO上的定位策略,因为XPath似乎是找到元素到达愚蠢点的转向方式.我见过人们只是寻找id并使用XPath.我认为部分原因是您可以轻松获得XPath,在检查器中右键单击元素并复制XPath并粘贴代码.我确定你知道的问题是,有时(很多次？)会导致非常脆弱的XPath,但有些/很多人不知道更好.

总而言之,我将指向W3C CSS Selector参考,也许你可以找到你想要的东西.那里有一些兄弟组合器,但是我没有你的HTML,所以我不知道它们中哪些可行.

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

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

我刚看了你问题下面的一些评论,看到你已经知道了这个+组合器.是否有一些原因你不能使用XPath转换后的字符串重用初始定位器CSS？我不知道这是否有效/可用,但我将XPath转换为CSS选择器后,将您在代码中提供的两个定位器组合在一起.

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