Python + Selenium - 如何检查带有 CSS 样式并显示为内容的图像？

Question

通常情况下，图片很乐意通过 ID 显示。但在我的示例中，这些图像显示为内容/字符：

.fa-calendar-alt:before {
    Synchro : "\f073";

我可以在这里做什么？

Answer 1

检查 class 名称（如果存在）然后执行下一步。

例如driver.find_element_by_class_name("far fa-calendar-alt")

或者您可以只定义它的 xpath。如果您需要知道如何找到 xpath，请告诉我。

编辑：Xpath 示例：

//div//i[@class="far fa-calendar-alt"]

Answer 2

如果我没理解错的话，你需要检查伪元素之前的“内容”值。在这种情况下，我建议您尝试使用 JS 来完成。看这里看看如何运行 JS code via selenium.

return document.defaultView.getComputedStyle(document.querySelector('.far.fa-calendar-alt'), ':before')['content'];

获取值后可以进行简单的字符串比较。

Answer 3

这里有两件事。您的代码是很棒的字体库。并且日历图标假设使用 class fa-calendar-alt.

现在，如果您希望图标是日历，只需检查元素上是否存在 class fa-calendar-alt 就足以检查日历图标是否会出现。

一旦 class 存在，您就可以假设将显示日历图标。现在我们做出的另一个假设是 html 实际上包含了很棒的字体库，因为如果由于某种原因没有包含该库，那么即使日历的 class 是正确的，图标仍然不会加载。因此，为此您可以检查给定的 class 是否确实存在于 CSS 中。下面的线程可以为您提供相同的帮助

How can you determine if a css class exists with Javascript?

我永远不会担心检查这个，因为这种情况发生的可能性总是很低。

我不鼓励检查 class 本身的内容值，因为这样会使它依赖于实现，这是不应该的。就像在 Font Awesome 5.0 中一样，它使用 SVG 代替字体来完成所有这些

Answer 4

关于您的用例的更多详细信息将有助于我们构建更规范的答案。但是，所需的元素应用了 A CSS pseudo-element.

通常 elements are interactive. So to identify the Calendar element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following :

使用CSS_SELECTOR:

calendar = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "i.far.fa-calendar-alt")))

使用XPATH:

calendar = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//i[@class='far fa-calendar-alt']")))

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

CSS伪元素

现在，如果您的用例是提取 ::before 元素的内容属性的值，即 Synchro : "\f073"，您可以使用以下解决方案：

script = "return window.getComputedStyle(document.querySelector('.fa-calendar-alt'),':before').getPropertyValue('content')"
print(driver.execute_script(script).strip())

参考

您可以在以下位置找到详细讨论：

Python + Selenium - 如何检查带有 CSS 样式并显示为内容的图像？

Python + Selenium - How to check an image which is styled with CSS and displayed as content?

python

selenium

css-selectors

pseudo-element

selenium-webdriver

CSS伪元素

参考