Python + Selenium - 如何检查使用 CSS 设置样式并显示为内容的图像？

Posted 2023-02-23

技术标签:

【中文标题】Python + Selenium - 如何检查使用 CSS 设置样式并显示为内容的图像？【英文标题】：Python + Selenium - How to check an image which is styled with CSS and displayed as content? 【发布时间】：2020-09-02 05:38:11 【问题描述】：

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

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

我可以在这里做什么？

【问题讨论】：

您到底想检查什么？如果它存在，或者要进行一些复杂的比较来定位某些东西？他想知道他是否可以通过selenium检查“\f073”部分 【参考方案1】：

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

通常Calendar 元素是交互式的。因此，要识别 Calendar 元素，您需要为 element_to_be_clickable() 诱导 WebDriverWait，您可以使用以下任一 Locator Strategies：

使用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 元素的 content 属性的值，即 Synchro : "\f073"，您可以使用以下解决方案：

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

参考

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

How locate the pseudo-element ::before using Selenium Python

【讨论】：

【参考方案2】：

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

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

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

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

我永远不会担心检查这个，因为这种情况发生的机会总是非常低。

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

【讨论】：

【参考方案3】：

如果我理解正确，您需要检查 pseudo-element 之前的“content”值。在这种情况下，我建议你尝试用 JS 来做。看这里看看如何运行JS code via selenium。

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

得到值后就可以进行简单的字符串比较了。

【讨论】：

【参考方案4】：

检查类名是否存在，然后执行下一步。

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

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

编辑：Xpath 示例：

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