在搜索兄弟姐妹时使用CSS选择器而不是XPath定位器 [英] Using CSS selectors instead of XPath locators when searching through siblings

问题描述

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

Currently, I have the following page object fields:

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

有没有办法替换团队的XPath定位器字段，并有一个CSS选择器？

Is there a way to replace the XPath locator for the teams field and have a CSS selector instead?

它的动机来自样式指南和建议不要使用XPath 。

从我的理解，有一个CSS选择器是不可能去从下一个兄弟开始从上下文中的当前元素。但是，有什么替代方案吗？

From what I understand, it is impossible to have a CSS selector to go to the next sibling starting from current element in the context. But, are there any alternatives?

推荐答案

说不要任何东西是愚蠢的。我强烈喜欢CSS选择器，因为定位元素通过id，CSS选择器，只是什么...比XPath更快。但是...同时我们说的是几毫秒的差异。

Saying NEVER to anything is silly. I strongly favor CSS selectors because locating element by id, CSS selector, just about anything... is faster than XPath. But... at the same time we're talking a few ms of difference.

有一些事情，XPath可以做，没有其他定位器方法可以。要记住的一个例子是通过包含的元素文本找到一个元素（ A 除外）。除此之外，我通常坚持使用CSS选择器，当ID不工作。

There are some things that XPath can do that no other locator method can. One example that comes to mind is finding an element (other than A) by contained element text. Other than that I generally stick to CSS selectors when ID doesn't work.

我强烈不喜欢很多人的定位器策略SO，因为XPath似乎是goto方式找到元素到它的愚蠢的点。我看到人们只寻找一个id和使用XPath。我认为它的一部分是你可以获得一个XPath，右键单击元素在检查器和复制XPath和粘贴在代码的轻松。这个问题，我相信你知道，有时（很多次），导致一个非常脆弱的XPath，但有些/很多人不知道更好。

I strongly dislike a lot of people's locator strategies on SO because XPath seems to be the goto way to find elements to the point where it's silly. I've seen people looking for nothing but an id and using XPath. I think part of it is the ease of which you can obtain an XPath, right click on element in inspector and copy XPath and paste in code. The problem with that, as I'm sure you know, is that sometimes (many times?) that results in a very brittle XPath but some/many people don't know any better.

这一切，我会指向你的W3C CSS选择器的参考，也许你可以找到你正在寻找什么。有一些兄弟的组合器在那里，但我没有你的HTML，所以我不知道，如果有的话，它们会工作。

All that said, I'll point you to the W3C CSS Selector reference and maybe you can find what you are looking for. There are some sibling combinators in there but I don't have your HTML so I don't know which, if any, of them would work.

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

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

问题，看看你已经知道 + 组合器。有什么原因你不能重用你的初始定位器CSS与XPath转换的字符串？我不知道这是否甚至有效/可用，但我已经合并了您提供的两个定位器，在将XPath转换为CSS选择器之后您的代码。

I just read some of the comments below your question and see that you already knew about the + combinator. Is there some reason you can't reuse your initial locator CSS with the XPath converted string? I don't know if this is even valid/usable but I've combined the two locators you provided in your code after converting the XPath to a CSS selector.

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

这篇关于在搜索兄弟姐妹时使用CSS选择器而不是XPath定位器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！