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

Question

<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选择器来查找包含文本'online'的元素。请帮助我。

Answer 1

css_selector无法做到，xpath是按文本定位的唯一方法。有find_element_by_link_text，但仅用于<a>标签，没有其他属性。

Answer 2

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

Answer 3

这不可能。

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

将您跨度的内容复制到数据：data-text =“在线”

例如：

<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;
}

Answer 4

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

要查找元素，可以使用以下Locator Strategies中的任何一个：

• CSS_SELECTOR 1：

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

• CSS_SELECTOR 2：

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