Python Selenium 通过 CSS 匹配文本获取元素答案

【问题标题】：Python Selenium get element by CSS matching textPython Selenium 通过 CSS 匹配文本获取元素
【发布时间】：2021-04-19 23:16:49
【问题描述】：

您好，我不知道如何通过 CSS 获取元素并与文本匹配。我知道可以使用 Xpath 来完成，但我更愿意使用 CSS。

<div class="button-face">
  <div class="button-face-caption"> Text I want to find 1</div>
</div>
<div class="button-face">
  <div class="button-face-caption"> Text I want to find 2</div>
</div>

所以 in by CSS 会类似于...

driver.find_element_by_css('div.button-face-caption')

但是如何添加文本匹配呢？我尝试了contains 和innerText，但似乎都没有。

【问题讨论】：

为什么在这种情况下偏爱css？
@trickymuffin 你能用<div class="button-face">的父元素更新HTML吗？

标签： python selenium selenium-webdriver css-selectors webdriver

【解决方案1】：

正如你所说，它在 xpath 中受支持：

这将是一个使用contains 和text() 的xpath 解决方案

driver.find_element_by_xpath('//div[@class="button-face-caption" and contains(text(),"Text I want to find")]')

xpath 是：

//div[@class="button-face-caption" and contains(text(),"Text I want to find")]

对于 css，请看这里：https://sqa.stackexchange.com/q/362/34209 这应该允许我们使用：

div:contains('Text I want to find')

这会引导我们去

driver.find_element_by_css("div:contains('Text I want to find')")

但是这带有BIG caveat：

:contains() 不是当前 CSS3 规范的一部分，因此它将不适用于所有浏览器，仅适用于之前实现它的浏览器拉。（参见 w3.org/TR/css3-selectors）

【讨论】：

driver.find_element_by_css_selector("div:contains('No, I need to create an account')").click() InvalidSelectorException: Message: An invalid or illegal selector was specified :(
哪个浏览器？正如我所说，它实际上不是有效的 CSS。我只会使用 xpath。

【解决方案2】：

作为解决方法，您可以创建自己的函数

def find_by_css(selector, text=''):
    return [element for element in driver.find_elements_by_css_selector(selector) if text in element.text][0]

那么你可以称它为

find_by_css('div.button-face-caption')  # search only by CSS-selector

或

find_by_css('div.button-face-caption', 'Text I want to find 2')  # search by CSS + text

【讨论】：

【解决方案3】：

根据以下讨论：

The :contains pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).

解决方案

你需要考虑<div class="button-face">元素的祖先并向下遍历。让我们假设 <div class="button-face"> 都在父 <div class="class"> 中：

<div class="class">
    <div class="button-face">
      <div class="button-face-caption"> Text I want to find 1</div>
    </div>
    <div class="button-face">
      <div class="button-face-caption"> Text I want to find 2</>
    </div>
</div>

所以用文字标识元素为：

我要找的文字1：

div.class div:first-child > div.button-face-caption

我要找的文字2：

div.class div:nth-child(2) > div.button-face-caption

参考文献

您可以在以下位置找到一些相关的详细讨论：

【讨论】：