从 UL 中的 LI 中提取图像 url答案

【问题标题】：Extract an image url from a LI in an UL从 UL 中的 LI 中提取图像 url
【发布时间】：2017-11-06 16:41:47
【问题描述】：

我正在尝试从以下 HTML 中提取 href 值 <img ng-src=。

//images.mycar.com... 之后的所有内容都是动态的。

这是一个<ul> 和许多<li>，它将是列表中的第一项。我希望能够捕获它，以便构建一个 URL 来单击图像。

对不起，如果我的帖子令人困惑..我会尽力澄清。

以//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-S-01.jpg为例

是我要提取的项目，所以我可以点击图像。

<!-- Begin Results List -->
  <ul id="resultsLists" class="o-media-list  c-animate  c-animate--show" ng-show="rc.results.vehicles.length" style="">
    <li id="BJ11TFZ" class="c-animate  c-animate--repeat  u-pb ng-scope" ng-repeat="car in rc.results.vehicles track by car.registration" style="">
      <div class="o-media  c-card  c-card--hover  c-card__block  u-p-0  u-shadowed  u-shadowed--hover">
        <div class="o-media__left  o-grid__col-sm-5  o-grid__col-xs-12  u-p-0  u-no-float--sm">

          <a ng-href="/used-car/FORD/FIESTA/BJ11TFZ" class="o-embed-responsive  o-embed-responsive--16by9  o-media__object  c-rollover" ng-click="rc.viewCar(car, $index)" href="/used-car/FORD/FIESTA/BJ11TFZ">
            <img ng-src="//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-S-01.jpg" alt="FORD FIESTA" class="o-embed-responsive__item  c-rollover__image" cs-src-responsive="[ [ 'small', '//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-M-01.jpg' ], [ 'retina', '//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-M-01.jpg' ] ]" src="//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-M-01.jpg">
          </a>
        </div>

【问题讨论】：

到目前为止您尝试过什么？还请转储结束标签下方的所有内容，因为我们想要的只是 img src，这将使您的示例更具可读性
是的，都可以dump到图片src路径之后。我已经更新了 sn-p。
请参阅：How do I do X? SO 的期望是，提出问题的用户不仅会进行研究以回答他们自己的问题，还会分享研究、代码尝试和结果。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见：How to Ask
Extract a href value from a Line Item list的可能重复

标签： java selenium selenium-webdriver webdriver

【解决方案1】：

如果我理解你的问题，你正试图从上面的代码中提取下面的这个链接。

//images.mycar.com/BJ/11/BJ11TFZ/BJ11TFZ-used-FORD-FIESTA-DIESEL-HATCHBACK-1-6-TDCi-95-Titanium-3dr-Diesel-Manual-RED-2011-HR-S-01.jpg

这很简单。对此的纯 javascript 解决方案是：

var imgUrl = document.getElementById("resultsLists").getElementsByTagName('img')[0].getAttribute('ng-src');

代码首先选择文档的主 UL。然后它选择图像本身。然后它获取图像的“ng-src”属性并将其保存到变量imgUrl。

如果这就是你想要做的，请告诉我。

【讨论】：

OP 要求的是 Java，而不是 Javascript。

【解决方案2】：

好的，兄弟，有什么问题吗？如果你需要使用 webdriver selenium 和 java 8 使用下一个方法

driver.findElements(By.xpath("//ul[@id='resultsLists']/li//img")).stream()
.map(e -> e.getAttribute("ng-src"))
.collect(Collectors.toList())

【讨论】：

这将获得页面上的每个 IMG

【解决方案3】：

你可以像下面这样得到它。

String href = driver.findElement(by.xpath("//ul/li/div/div/a")).getAttribute("href")

【讨论】：

他不想要A href，他想要IMG src。
引用他的话-我正在尝试从以下 HTML 中提取 href 值
是的......并且引用显示了一个 IMG 标记和包含 URL 的 ng-src（他记错了并声明为 href）。