CODEWITHSUNDEEP
htmlcssseleniumselenium-webdriverimageurl
roger_that
roger_that

Reputation: 9791

Get CSS attribute of hidden element using Selenium

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");

Upvotes: 1

Views: 2580

Answers (2)

Nadun
Nadun

Reputation: 300

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.

Upvotes: 0

Ajinkya
Ajinkya

Reputation: 22710

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");

Upvotes: 2

Related Questions