如何通过 css 中的文本而不是 xpath 正确识别选择器答案

【问题标题】：How do I properly identify a selector by its text in css instead of xpath如何通过 css 中的文本而不是 xpath 正确识别选择器
【发布时间】：2017-04-24 12:52:45
【问题描述】：

当我设置一些简单的html时

<html>
  <head>
    <title>Simple Site</title>
  </head>
  <body>
    <form>
      <label>Name:</label><input type="text"></form><br/>
      <label>Phone:</label><input type="text">
    </form>
    <div>happy</div>
    <div>angry</div> 
    <div>sad</div>
  </body>
</html>

我试图通过文本指定一个 div，但无法做到

 div[@text='happy']              #nope
 html body div[@text='angry']    #nope
 html body div:contains('angry') #nope
 html body div[text='angry']     #nope

我错过了什么？

【问题讨论】：

How do I find an element that contains specific text in Selenium Webdriver (Python)?的可能重复
stackoverflow.com/questions/1520429/…的可能重复
stackoverflow.com/questions/30648554/…
Selenium 的某些版本确实支持 :contains()，但我假设您使用的是 Selenium WebDriver，但它不支持，因为 :contains() 不再在标准中。
@TangibleDream：是的 - 你需要 XPath。

标签： css selenium capybara

【解决方案1】：

使用以下代码：

 div[type='happy']{
   background-color:red;
 }

<form>
    <label>Name:</label><input type="text"></form><br/>
<label>Phone:</label><input type="text">
</form>
<div type="happy">happy</div>
<div>angry</div>
<div>sad</div>

【讨论】：

好主意，但是，我无法控制实际 html 的编写方式。所以我不能按类型搜索。
这个答案有很多错误 1) 使用无效属性污染标记 2) 标记可能一开始就不受他们的控制 3) 问题与 CSS 无关

【解决方案2】：

CSS 没有办法匹配元素的文本内容，但 Capybaras find 提供了一个text 选项来按文本内容进行过滤。它需要一个字符串或一个正则表达式

angry_div = find(:css, 'div', text: 'angry') # The :css can be omitted if Capybara.default_selector = :css (which it is by default)

【讨论】：