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似乎是找到元素到达愚蠢点的转向方式。我见过人们只是寻找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

Answer 2

还有另一种 Protractor特定的解决方法 - 使用父元素的locator()并连接以生成子元素选择器：

this.filterTeamDropdown = $("filter-item-edit .dropdown button");
this.teams = this.filterTeamDropdown.$$(this.filterTeamDropdown.locator().value + " + ul li.dropdown-list-item")

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

2 个答案: