如何通过css选择器查找包含属性和文本的元素答案

【问题标题】：How to find element by css selector witch contains attribute and text如何通过css选择器查找包含属性和文本的元素
【发布时间】：2020-01-20 12:39:27
【问题描述】：

<span _ngcontent-c77="" class="status-label success" tooltipcontainer="body" tooltipheader="Error" tooltipmode="click" tooltipposition="top" data-test-id="status"> online </span>

在 xpath 中我可以找到这个元素

//*[@data-test-id="status" and text()=" online "]

但我不明白如何使用 css 选择器找到包含文本“在线”的这个元素。请帮帮我。

【问题讨论】：

标签： python selenium css-selectors

【解决方案1】：

css_selector 无法做到这一点，xpath 是通过文本定位的唯一方法。有find_element_by_link_text，但只针对<a>标签，没有附加属性。

【讨论】：

【解决方案2】：

你不能因为 Selenium 支持 CSS2，而contains() 是 CSS3。你可以找到详细信息here

【讨论】：

【解决方案3】：

您将无法使用innerText（即contains('string')）通过css-selectors 定位元素。你可以在selenium.common.exceptions.InvalidSelectorException with "span:contains('string')"找到详细的讨论。

要定位元素，您可以使用以下任一Locator Strategies：

CSS_SELECTOR1：

span.status-label.success[tooltipcontainer='body'][tooltipheader='Error']

CSS_SELECTOR2：

span[data-test-id='status'][tooltipcontainer='body'][tooltipheader='Error']

【讨论】：

【解决方案4】：

这是不可能的。

但我认为你可以使用“数据-”

将内容从您的 span 复制到数据： data-text="online"

例如：

<span _ngcontent-c77="" data-text="online" class="status-label success" tooltipcontainer="body" tooltipheader="Error" tooltipmode="click" tooltipposition="top" data-test-id="status"> online </span>

还有 CSS：

/* Select every cell containing "Online" */
span[data-text*="online"] {
  color: green;
}

【讨论】：

html中没有data-text属性。
我知道，但它是一个解决方案，必须添加此属性。仅使用 CSS，这是一种独特的方式
所以他需要定位元素，添加属性，然后再定位？