搜索同级时使用 CSS 选择器而不是 XPath 定位器

Using CSS selectors instead of XPath locators when searching through siblings(搜索同级时使用 CSS 选择器而不是 XPath 定位器)

问题描述

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

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')]"));

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

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

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

The motivation for it is coming from the Style Guide and the recommendation not to use XPaths.

据我了解，不可能有一个 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 除外).除此之外，当 ID 不起作用时，我通常会坚持使用 CSS 选择器.

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 似乎是查找元素的首选方式，以至于它很愚蠢.我见过人们只寻找一个 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/#相邻兄弟组合器

我刚刚阅读了您问题下方的一些评论，发现您已经了解 + 组合器.是否有某些原因您不能将初始定位器 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 定位器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！