Python + Selenium - 如何检查一个用CSS样式化并显示为内容的图片？

Question

通常情况下，一张图片很乐意通过一个ID来显示。但在我的例子中，这些图片是作为内容字符显示的。

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

我可以在这里做什么？

Answer 1

如果我没理解错的话，你需要检查一下"内容"前值 伪元素.在这种情况下，我建议你可以尝试用JS来做。请看这里，看看如何运行 通过selenium编写JS代码.

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

得到值后，你可以做简单的字符串比较。

Answer 2

检查类名是否存在，如果存在则执行下一步。

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

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

编辑：Xpath的例子。

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

Answer 3

如果能提供更多关于你的案例的细节，将有助于我们构建一个更规范的答案。然而，所需的元素被应用了一个A CSS 伪元素.

通常情况下 日历 元素是互动的。因此，要确定 日历 你需要诱导的元素 WebDriverWait 对于 element_to_be_clickable() 您可以使用以下任何一种方式 定位策略:

• 使用 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 Pseudo-elements

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

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

---

引用

你可以在:

• 在使用Selenium Python之前，如何定位伪元素::。

Answer 4

这里有两点。你的代码是font-awesome库。而日历图标应该使用的是 fa-calendar-alt.

现在，如果你希望你的图标是一个日历，只是检查类的 fa-calendar-alt 存在于你的元素上，应该足以检查日历图标是否会出现。

一旦这个类存在，你就可以假设日历图标将被显示。现在，我们做的另一个假设是，字体-awesome库确实被html包含了，因为如果由于某些原因没有包含该库，那么即使日历的类是正确的，图标仍然不会加载。因此，你可以检查CSS中是否存在某个类。下面的帖子可以帮助你解决这个问题

如何用Javascript确定一个css类是否存在？

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

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