How to get background-image from inline css using selenium

Question

Using python how can I get the background image using selenium? Which has an inline CSS? I want to get the image URL from the background-image: url()

<div id="pic" class="pic" data-type="image" style=" background-image: url(http://test.com/images/image.png;); height: 306px; background-size: cover;"></div>

FYI! stackoverflow.com/questions/42187922/…

Umair Latif
– Umair Latif

2019-11-29 10:37:48 +00:00
Commented Nov 29, 2019 at 10:37 — Umair Latif
– Umair Latif, Commented Nov 29, 2019 at 10:37

undetected Selenium · Accepted Answer · 2019-12-05 12:00:43Z

8

To get the background image you need to use value_of_css_property(property_name) method and you have to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

import re

my_property = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.pic#pic[data-type='image']"))).value_of_css_property("background-image")
print(re.split('[()]',my_property)[1])

Using XPATH:

import re

my_property = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@class='pic' and @id='pic'][@data-type='image']"))).value_of_css_property("background-image")
print(re.split('[()]',my_property)[1])

Console Output:
```
test.com/images/image.png
```

Update

As the url is getting wrapped up with in double quotes i.e. "..." you can use the following solution:

print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@class='pic' and @id='pic'][@data-type='image']"))).value_of_css_property("background-image").split('"')[1])

References

You can find a couple relevant discussions related to:

Retrieving the background in How to convert #ffffff to #fff or #fff to #ffffff while asserting the background color rgb(255,255,255) returned by Selenium getCssValue("background")
Retrieving a sub-string in How to retrieve a sub-string from a string that changes dynamically with respect to multiple delimiters through Selenium in Python

edited Dec 5, 2019 at 12:00

answered Nov 29, 2019 at 11:05

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anjali Over a year ago

That was helpful but I am getting the value as "url( "test.com/images/image.png") " how to get that exact link which is inside the url

undetected Selenium Over a year ago

@Anjali Checkout the updated answer and let me know the status.

Anjali Over a year ago

@DebanjanB your approach gave the result with " " at both ends but adding [ " ] this pattern to the result gave me the exact URL. Thank you for your solution

undetected Selenium Over a year ago

@Anjali Going by the HTML the css property is background-image: url(http://test.com/images/image.png;); and have no quotes around. So the webapp may be adding the quotes to the string which we can't recognize unless we run the apps. I understand adding " within the pattern solved your issue.

undetected Selenium Over a year ago

@Anjali Can you check and update me the result using the alternative option I have added as an update to the answer if that works?

Hamza Lachi · Accepted Answer · 2019-11-29 11:48:06Z

1

Try This:

print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.pic#pic[data-type='image']"))).get_attribute("href"))

answered Nov 29, 2019 at 11:48

Hamza Lachi

1,0641 gold badge8 silver badges26 bronze badges

Comments

KunduK · Accepted Answer · 2019-11-29 12:20:17Z

0

To get the URL You need to use regular expression. In order to use regular expression Import re and then use the following regular expression.

import re
itemimage=WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.CSS_SELECTOR, "div#pic"))).value_of_css_property("background-image")
print(re.search("(?P<url>http?://[^\s;]+)", itemimage).group("url"))

Output:

http://test.com/images/image.png

answered Nov 29, 2019 at 12:20

KunduK

33.4k5 gold badges19 silver badges42 bronze badges

Comments

itronic1990 · Accepted Answer · 2021-06-22 22:00:16Z

0

 my_setup = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.XPATH, "//body/div[@class='container']/div[@class='row']/div[@class='card-stack']/div/div[1]/div[1]"))).value_of_css_property("background-image")

image_url = re.split('[()]',my_setup)[1]

use this actually its working fine for me..

main things..

.value_of_css_property("background-image")

not working for a list

edited Jun 22, 2021 at 22:00

itronic1990

1,4412 gold badges7 silver badges19 bronze badges

answered Jun 22, 2021 at 17:25

Vivek Singh

1

Collectives™ on Stack Overflow

How to get background-image from inline css using selenium

4 Answers 4

Update

References

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update

References

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related