CODEWITHSUNDEEP
pythonseleniumselenium-webdrivercss-selectorspseudo-element
Mornon
Mornon

Reputation: 79

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

Details 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?

Upvotes: 6

Views: 1009

Answers (4)

undetected Selenium
undetected Selenium

Reputation: 193088

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:

Upvotes: 4

Tarun Lalwani
Tarun Lalwani

Reputation: 146510

There are two things here. Your code is font-awesome library. And the calendar icon is suppose to use the class fa-calendar-alt.

Now if you expect your icon to be a calendar, just checking if the class fa-calendar-alt exists on your element should be good enough to check if the calendar icon will appear.

Once this class is there you can assume that the calendar icon will be displayed. Now the other assumption that we make is that the font-awesome library was actually included by the html, because if for some reason the library is not included then even though class of calendar is correct, the icon will still not load. So for that you can check if a given class actually exists in CSS or not. Below thread can help you for the same

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

I would never worry about checking this, because chances of such occurrences will always be very low.

I would discourage checking content values of the class itself, as you are then making it implementation dependent, which you shouldn't. Like in Font Awesome 5.0, it use SVG to do all this instead of a font

Upvotes: 3

Nestor Yanchuk
Nestor Yanchuk

Reputation: 1246

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.

Upvotes: 4

Hassaan Ali
Hassaan Ali

Reputation: 1061

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"]

Upvotes: 4

Related Questions