如何使用 Selenium 和 Javascript 从背景图像中检索 url答案

【问题标题】：How to retrieve the url from background image using Selenium and Javascript如何使用 Selenium 和 Javascript 从背景图像中检索 url
【发布时间】：2020-10-09 02:27:59
【问题描述】：

我正在尝试使用 Xpath 或 Javascript 从背景图像中检索 url，但现在没有运气。这就是我所拥有的

<div style="width: 100%; display: inline-block;">
 <div tws-article-images-preload="item" class="tws-article-images--preload ng-scope tws-article-images-- 
   image-small" ng-click="closeImage()" use-original="useOriginal" style="background-image: 
   url(&quot;https://i.pinimg.com/originals/59/54/b4/5954b408c66525ad932faa693a647e3f.jpg;);">
 </div>
</div>

并尝试了这两个不同的修改

//*[starts-with(@style, 'background-image: url()] <--Did not work 

return document.getElementsByClassName('tws-article-images--preload ng-scope tws-article-images--image-small').src

【问题讨论】：

这能回答你的问题吗？ How to get background image URL of an element using JavaScript?
为什么用 f# 标记？（我会删除它，它似乎不适用）
为什么用“canopy”标记？

标签： javascript css selenium selenium-webdriver webdriver

【解决方案1】：

document.getElementsByClassName('classname')[0].style.backgroundImage.slice(4, -1).replace(/"/g, "");

【讨论】：

是的。我之前尝试过，但它让我无法读取未定义的属性“背景图像”
@Dymond 我编辑了我的答案。需要获取第一项（[0]）。

【解决方案2】：

你可以试试

return document.getElementsByClassName('tws-article-images--preload ng-scope tws-article-images--image-small').style.backgroundImage.slice(4, -1).replace(/["']/g, "");

【讨论】：

【解决方案3】：

您的 XPath 表达式错误（缺少 ' 和可能令人讨厌的 CRLF）。修复它：

//*[starts-with(@style, 'background-image:')]/@style

然后使用正则表达式清理结果：

txt = 'background-image: url("https://i.pinimg.com/originals/59/54/b4/5954b408c66525ad932faa693a647e3f.jpg;);'
result = re.sub(r"^.+\"(.+?);.+", r"\1", txt)
print(result)

使用 XPath：

substring-after(substring-before(//*[starts-with(@style, 'background-image:')]/@style,';)'),'"')

输出：https://i.pinimg.com/originals/59/54/b4/5954b408c66525ad932faa693a647e3f.jpg

【讨论】：

【解决方案4】：

要从背景图像中检索 url，您可以使用以下解决方案：

使用slice():

var img = document.getElementsByClassName('tws-article-images--preload')[0],
style = img.currentStyle || window.getComputedStyle(img, false),
bgImage = style.backgroundImage.slice(4, -1).replace(/"/g, "");
//printing the url
console.log('Image URL: ' + bgImage);

使用正则表达式：

var img = document.getElementsByClassName('tws-article-images--preload')[0],
style = img.currentStyle || window.getComputedStyle(img, false),
var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];
//printing the url
console.log('Image URL: ' + url);

【讨论】：