Get CSS attribute of hidden element using Selenium

Question

I am trying to access background-image:url('.....') property of a container div and get the image url.

The problem is that the container div is initially hidden and image url is added dynamically and the container is made visible.

When i try to access the element using photoContainer.getCssValue("background-image"); it returns me none.

The html code is :

<div id="photo_container" style="background-image: url("res/images/840x460/287/28702560.jpg");"></div>

The CSS for this div is :

background-image: url("res/images/840x460/287/28702560.jpg");
display: none;

However using the below code am able to get the url string:

       WebDriverWait wait = new WebDriverWait(driver, 20);
       WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("photo_holding")));
       // Now div is visible so get the attribute
       WebElement photoContainer = driver.findElement(By.id("photo_holding"));
       String imgUrl = photoContainer.getCssValue("background-image");
       System.out.println(imgUrl);

   driver.quit();

The images are loaded as a slideshow using some time interval and my aim is to get the dynamically loaded image url

EDIT :

Below code is used to get the image url from the slide show :

 for(int i=0;i<=slideCount;i++){
       WebDriverWait wait = new WebDriverWait(driver, 20);
       WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("photo_holding")));
       // Now div is visible so get the attribute
       WebElement photoContainer = driver.findElement(By.id("photo_holding"));
       String imgUrl = photoContainer.getCssValue("background-image");
       System.out.println(imgUrl);
       Thread.sleep(2000);
   }

The image container "photo_holding" is added dynamically using the below code

$('<div id="photo_holding"></div>').insertAfter("#photo_container");$("#photo_holding").css("background-image","url("+slideshow_photos[o]+")");
 $("#photo_container").fadeOut(2000,function() {$(this).remove();$("#photo_holding").attr("id","photo_container");

Answer 1

ImageURLs are stored in slideshow_photos[], right? Then if we read it then we may able to get what we need.

According to Reading JavaScript variables using Selenium WebDriver 3rd answer, if there anyway to get to know number of slides, then we may able to get them in a loop String result = (String)js.executeScript("return slideshow_photos["+i+"]");

Hope this may help you.

Answer 2

Try waiting til div gets visible

WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("photo_container")));
// Now div is visible so get the attribute
WebElement photoContainer = driver.findElement(By.id("photo_container"));
String imgUrl = photoContainer.getCssValue("background-image");