CSS 选择器：href 的锚文本包含答案

【问题标题】：CSS Selector: Anchor text of href containsCSS 选择器：href 的锚文本包含
【发布时间】：2019-02-02 01:12:59
【问题描述】：

我目前正在使用 Selenium，现在已经进入了 CSS 选择器这个有趣但非常困难的世界。

我目前正在考虑选择 Google 工具栏的不同选项。例如，当您搜索某些内容时，在结果页面上，您可以选择在图片、新闻、视频等下方搜索相同的字词

我对选择“图片”链接特别感兴趣。

我已经研究了很长时间，我得到的最接近的是下面的选择器：

div a.q.qs[href]

这会深入到正确的子类，但其中有 16 个。尽管进行了数小时的漫无目的的搜索，但我无法使用围绕锚文本的 contains 方法完成查询，这在目标子类中是独一无二的。

我知道 Selenium 中有一个 By LinkText 选项，但我不确定锚文本在整个页面中是否唯一。另外，我真的很想了解一般的 CSS 选择器，所以即使是这样，我也想解决这个特定问题，以便将其应用于未来的问题。

我正在寻找类似下面的伪 CSS 选择器：

div a.q.qs[href].Anchorcontains("Images")

谁能帮忙？

【问题讨论】：

这是一个有趣的问题。我建议您添加一些代码块以使其更具可读性（CSS 选择器）并删除 selenium 和 java 标签，因为即使它对您来说是 java&selenium 问题，问题本身也只关注 css 选择器。跨度>
所有链接都有一个名为tbm的唯一参数：对于图像，它的值是isch，所以我会选择a[href*="isch"]。适用于浏览器，但不确定硒。
这是个好主意。或者，您可以假设“图像”项始终是列表中的第二个。如果您确定，在您想要选择图像时，选择“全部”，它是第一个包含链接的项目。
如果您希望通过锚点的实际文本内容进行选择，则不能这样做：stackoverflow.com/questions/1520429/…
以下是一些 CSS 参考链接，可帮助您入门：W3C reference、SauceLabs CSS Selectors tips 和 Taming Advanced CSS Selectors。

【解决方案1】：

所有链接都有一个名为tbm 的唯一参数：它的值是isch 用于图像，所以我会选择

a[href*="tbm=isch"]

【讨论】：

【解决方案2】：

有时可以通过 CSS 选择器获得所需的内容，但如果您想通过包含的文本查找元素，则必须使用链接文本/部分链接文本（如果它是链接）或 XPath 用于其他所有内容。

你想要的 XPath 是

//div[@id='hdtb-msb-vis']//a[.='Images']

您可以使用//a[.='Images']，但这会返回两个元素，其中一个不可见。

分解一下

// 在任何级别
div 查找包含 ID 为“hdtb-msb-vis”的 DIV
[@id='hdtb-msb-vis']
//a 有一个子 A 在包含等于“图片”的文本 (.) 的任何级别
[.='Images']

如果你想通过链接文本进行探索，你可以写类似

int count = driver.findElements(By.linkText("Images")).size();

和打印计数。我的猜测是它将是 2，其中一个是不可见的。如果需要，您可以使用 Selenium 将其进一步过滤到仅可见链接。

BackSlash 的 CSS 选择器答案也会有同样的问题。你可以稍微调整一下，用 CSS 选择器定位器解决这个问题

#hdtb-msb-vis a[href*='tbm=isch']

【讨论】：

感谢@JeffC - 我接受了 BackSlashes 的回答，因为 CSS 更具可读性。但是，我实际上认为您的回答提供了一种更有针对性的做事方式。我很矛盾！我希望我能做出两个被接受的答案
没关系。可读性在读者眼中。一旦你更熟悉它们，它们就会更容易阅读。如果没有更具体的定位器，您将需要编写更多 Java/Selenium 代码来处理不可见元素以避免出现问题。