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>
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
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])
You can find a couple relevant discussions related to: