如何在 python 中使用 Selenium 提取 <figure> 图像？答案

【问题标题】：How to extract <figure> images using Selenium in python?如何在 python 中使用 Selenium 提取 <figure> 图像？
【发布时间】：2019-12-03 02:46:36
【问题描述】：

我正在尝试从应用商店的 xpath 上方提取图像：https://apps.apple.com/us/app/mercer-marketplace-benefits/id1041417557

我使用 xpath 尝试了以下代码：

driver.get('https://apps.apple.com/us/app/mercer-marketplace-benefits/id1041417557')
rating_distr = WebDriverWait(driver,30).until(EC.presence_of_element_located((By.XPATH, """(//*[@id="ember290"]/div/div[2])""")))
print(rating_distr.get_attribute('innerHTML'))

但是输出的不是图片：

    <figure class="we-star-bar-graph">
    <div class="we-star-bar-graph__row">
      <span class="we-star-bar-graph__stars we-star-bar-graph__stars--5"></span>
      <div class="we-star-bar-graph__bar">
        <div class="we-star-bar-graph__bar__foreground-bar" style="width: 76%;"></div>
      </div>
    </div>
    <div class="we-star-bar-graph__row">
      <span class="we-star-bar-graph__stars we-star-bar-graph__stars--4"></span>
      <div class="we-star-bar-graph__bar">
        <div class="we-star-bar-graph__bar__foreground-bar" style="width: 12%;"></div>

有没有办法将输出提取为图像？感谢您的帮助！

【问题讨论】：

您想要 5 条开始评论的数量还是 %？
希望我能得到两张图片。 xpath 用于 %。
这些标签没有图片来源。您可以使用这些元素周围的坐标拍摄 selenium 屏幕截图。看看这个解决方案 - stackoverflow.com/questions/13832322/…
你并不真的想要一张图片，对吧？您只需要“图像”包含的信息。如果您只是解析出实际包含星值的类名和样式，例如，您会得到更好的服务（并且会更快）。 we-star-bar-graph__stars--5 为 76%，we-star-bar-graph__stars--4 为 12%。将所有内容转储到工作表中，这比转储大量屏幕截图并通过手动打开每个屏幕截图、检查然后记录值来将其全部整理出来要快得多。
@JeffC 有没有更好的方法来提取“图像”中的内容？因为我的输出包含很多

标签： python selenium xpath figure

【解决方案1】：

正如我在评论中建议的那样，我认为更好/更快的方法是只获取值而不是截屏。如果您截取屏幕截图，则必须有人手动打开它，然后以其他格式记录屏幕截图中的值，这将是一个漫长而乏味的过程。相反，只需从页面中抓取数据并将其转储为最终所需的格式。

例如，如果您只查看 5 星评分栏的 HTML

<div class="we-star-bar-graph__row">
    <span class="we-star-bar-graph__stars we-star-bar-graph__stars--5"></span>
    <div class="we-star-bar-graph__bar">
        <div class="we-star-bar-graph__bar__foreground-bar" style="width: 76%;"></div>
    </div>
</div>

您可以看到应用了一个类we-star-bar-graph__stars--5，它表明它的星级。您还可以看到设置了条形的宽度style="width: 76%;"，以便告诉您 5 星评级的百分比。有了这些信息，我们就可以获取每颗星的评分。

ratings = driver.find_elements_by_css_selector("figure.we-star-bar-graph div.we-star-bar-graph__bar__foreground-bar")
# get the width of the entire bar
width = float(driver.find_elements_by_css_selector(".we-star-bar-graph__bar").value_of_css_property("width"))[:-2])
for i in range(len(ratings), 0, -1) :
    # get the width of the rating
    rating = float(ratings[len(ratings) - i].value_of_css_property("width")[:-2])
    print(str(i) + "-star rating: " + str(rating / width * 100) + "%")

这应该转储像

这样的值

5-star rating: 76%
4-star rating: 12%
3-star rating: 4%
2-star rating: 1%
1-star rating: 6%

这可能不是你最终想要的格式，但它应该能让你找到正确的方向。

【讨论】：

非常感谢！你的回答很好地解决了我的问题！
我应用了上面的代码但收到“TypeError: must be str, not WebElement”。不知道为什么我收到错误...
感谢您的更新。但我得到了不同的输出：“5 星评级：210.275px 4 星评级：33.2px 3 星评级：11.0625px 2 星评级：2.7625px 1 星评级：16.6px”
顺便说一句，我怎样才能看到“find_elements_by_css_selector”的输出？
我想我已经修复了它......我没有本地 python，所以我从浏览器控制台运行东西，它正在返回 %s。我更新了代码以获取条形的完整宽度，然后进行数学计算以计算百分比。我想我知道了，但你必须测试它并告诉我。

【解决方案2】：

打开网页并通过 id 滚动到元素，当我检查了 id 时，它是“ember290”，用于网页中您想要的部分。

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import pyscreenshot as ImageGrab

browser = webdriver.Chrome()  # we are using chrome as our webbrowser

browser.get('https://apps.apple.com/us/app/mercer-marketplace-benefits/id1041417557')
#rating_distr = WebDriverWait(browser,30).until(EC.presence_of_element_located((By.XPATH, """(//*[@id="ember290"]/div/div[2])""")))

ActionChains(browser).move_to_element(browser.find_element_by_id('ember290')).perform()

im=ImageGrab.grab()
im.show()

im=ImageGrab.grab(bbox=(162,650,500,500))
im.show()

ImageGrab.grab_to_file('im.png')

滚动完成后截取屏幕截图。

【讨论】：