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

Question

Normally a picture is gladly displayed via an ID. But in my example these images are displayed as content / character:

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

What can I do here?

Answer 1

If I understood you correctly, you need to ckeck the "content" value of before pseudo-element. In this case I'd suggest you to try to do it with JS. Look here to see how to run JS code via selenium.

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

After getting the value you can do simple string comparison.

Answer 2

check for the class name if it exists then execute your next step.

e.g. driver.find_element_by_class_name("far fa-calendar-alt")

or you can just define it's xpath. Let me know if you need to know how to find the xpath.

Edit: Xpath example:

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

Answer 3

A bit of more details about your usecase would have helped us to construct a more canonical answer. However, the desired element is applied with a A CSS pseudo-element.

Usually the Calendar 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 Locator Strategies:

• Using CSS_SELECTOR:

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

• Using XPATH:

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

• Note : You have to add the following imports :

  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

Now, if your usecase is to extract the value of the content property of the ::before element i.e. Synchro : "\f073" you can use the following solution:

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

---

Reference

You can find a detailed discussion in:

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