使用 Selenium 获取隐藏元素的 CSS 属性答案

【问题标题】：Get CSS attribute of hidden element using Selenium使用 Selenium 获取隐藏元素的 CSS 属性
【发布时间】：2014-05-31 01:03:14
【问题描述】：

我正在尝试访问容器 div 的 background-image:url('.....') 属性并获取图像 url。

问题是容器div最初是隐藏的，图像url是动态添加的，容器是可见的。

当我尝试使用photoContainer.getCssValue("background-image"); 访问元素时，它返回给我none。

html代码是：

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

这个 div 的 CSS 是：

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

但是使用下面的代码可以得到 url 字符串：

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

图像会使用一段时间间隔以幻灯片形式加载，我的目标是获取动态加载的图像 url

编辑：

以下代码用于从幻灯片中获取图片网址：

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

图片容器“photo_holding”是使用下面的代码动态添加的

$('<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");

【问题讨论】：

只是建议不要使用Thread.sleep，driver.get() 等待页面完全加载

标签： html css selenium selenium-webdriver imageurl

【解决方案1】：

尝试等待直到div 可见

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

【讨论】：

可以添加动态添加属性的代码吗？
嗯，它确实给出了url("res/images/840x460/287/28702560.jpg");的结果。有一个子 div 被隐藏并且实际上包含图像 url。但是，我怎样才能得到res/images/840x460/287/28702560.jpg 的网址？
使用 String Manipulation 并将检索到的字符串操作到您需要的位置。
@VaibhavShukla：您可以使用 String.split() 并使用返回数组中的第二个元素
实际上它是一个动态加载图像的幻灯片，我需要访问每个图像的 url。我知道幻灯片计数，所以我用完了一个循环，但这似乎不起作用，因为它无法找到 photo_container。请参阅问题的编辑部分。

【解决方案2】：

ImageURL 存储在slideshow_photos[] 中，对吗？然后，如果我们阅读它，那么我们可能会得到我们需要的东西。

根据Reading JavaScript variables using Selenium WebDriver 3rd 的回答，如果无论如何要了解幻灯片的数量，那么我们可以循环获取它们String result = (String)js.executeScript("return slideshow_photos["+i+"]");

希望对你有所帮助。

【讨论】：

我想要动态加载图片的url。请参阅问题的编辑部分。
是的，我们知道幻灯片的数量。 :)