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

Just a advice dont use Thread.sleep, driver.get() waits for page to load completely — Ajinkya
– Ajinkya, Commented Apr 16, 2014 at 9:09

Ajinkya · Accepted Answer · 2014-04-16 09:13:14Z

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

answered Apr 16, 2014 at 9:13

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

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

5 Comments

Ajinkya Over a year ago

Can you add the code which adds the attribute dynamically?

roger_that Over a year ago

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 ?

Manigandan Over a year ago

Use String Manipulation and manipulate the retrieved string to what desire you need.

Ajinkya Over a year ago

@VaibhavShukla: You can use String.split() and use second element from returned array

roger_that Over a year ago

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.

Community · Accepted Answer · 2017-05-23 10:28:17Z

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.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 16, 2014 at 10:02

Nadun

3005 silver badges16 bronze badges

2 Comments

roger_that Over a year ago

I want the url of dynamically loaded images. please see edited part of question.

roger_that Over a year ago

Yes we know the number of slides. :)

Collectives™ on Stack Overflow

Get CSS attribute of hidden element using Selenium

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related