1

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");
roger_that
  • 9,493
  • 18
  • 66
  • 102

2 Answers2

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");
Ajinkya
  • 22,324
  • 33
  • 110
  • 161
  • Can you add the code which adds the attribute dynamically? – Ajinkya Apr 16 '14 at 09:18
  • Well, it did gave result as `url("res/images/840x460/287/28702560.jpg");` . There was one child div which was hidden and actually containing the image url. But still, How would i get just the url `res/images/840x460/287/28702560.jpg` ? – roger_that Apr 16 '14 at 09:23
  • Use [String Manipulation](http://docs.oracle.com/javase/tutorial/java/data/manipstrings.html) and manipulate the retrieved string to what desire you need. – Manigandan Apr 16 '14 at 09:28
  • @VaibhavShukla: You can use `String.split()` and use second element from returned array – Ajinkya Apr 16 '14 at 09:29
  • Actually its a slideshow which dynamically loads the images and i need to access the urls of each image. I know the slide count so i used up a loop but that doesn't seems to work as it is unable to find the photo_container. Please see the edit part of question. – roger_that Apr 16 '14 at 10:13
0

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.

Community
  • 1
  • 1
Nadun
  • 300
  • 4
  • 15