如何使用BS或selenium从scrape中刮取数据

Question

我希望从一个图表中提取数据，当你用鼠标悬停在图表上，但没有出现在源代码上时，它是可以查看的。有办法提取这个吗？我对此并不熟悉，但到目前为止还没有找到关于这个问题的讨论。这似乎是一份硒的工作，或者是一些我从未听说过的很酷的工作。

下面的代码涉及到大麻素部分，这是我感兴趣的区域，还有萜烯部分，也有同样的问题。

https://www.dinafem.org/en/amnesia-cbd/

<div id="product-cannabinoids-chart-wrapper"> <div data-chart_id="product_cannabinoids" class="auto-gchart" id="product_cannabinoids_chart"></div> </div> <form data-chart_id="product_cannabinoids" class="auto-gchart-filters" style="display: none;"> <input type="hidden" name="product_sku" value="0003142"/> </form>

Answer 1

这些表来自POST请求。你可以用纯requests来模仿它。

下面是操作步骤：

import json

import requests
from bs4 import BeautifulSoup

url = "https://www.dinafem.org/en/amnesia-cbd/?PageSpeed=noscript"

headers = {
    "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) "
                  "AppleWebKit/537.36 (KHTML, like Gecko) "
                  "Chrome/90.0.4430.85 Safari/537.36",
    "X-Requested-With": "XMLHttpRequest"
}

with requests.Session() as connection:
    product_sku = BeautifulSoup(
        connection.get(url).text,
        "html.parser",
    ).find("input", {"name": "product_sku"})["value"]

    chart_ids = ["product_cannabinoids", "product_terpenes"]

    payload = {
        "action": "get_gchart_data",
        "filters": f"product_sku={product_sku}",
    }

    charts = []
    for chart_id in chart_ids:
        payload.update({"chart_id": chart_id})
        charts.append(connection.post(url, headers=headers, data=payload).json())

print(json.dumps(charts[0], indent=2))

输出：

{
  "error": 0,
  "chart_id": "product_cannabinoids",
  "data": [
    [
      "Cannabinoid",
      "(%)"
    ],
    [
      "CBD",
      11.64
    ],
    [
      "THC",
      7.37
    ],
    [
      "CBC",
      0.7
    ],
    [
      "CBG",
      0.46
    ],
    [
      "THCV",
      0.04
    ],
    [
      "CBN",
      0.01
    ]
  ],
  "debug": {
    "total": 20.220000000000002
  }
}

你甚至可以在网站上绘制出一个真实的图表。

将此添加到您的进口中：

import matplotlib.pyplot as plt

然后放上这个：

data = [i[1] for i in charts[1]["data"]]
info = [i[0] for i in charts[1]["data"]]
fig = plt.figure(figsize=(10, 7))
plt.pie(data, labels=info)
plt.show()

为了得到这个：

​

​

Answer 2

要首先使用Selenium执行此操作，您需要在所需的图表矩形上悬停。

例如，如果您正在寻找由(//div[@data-chart_id='product_cannabinoids']//*[name()='g']//*[name()='g']//*[name()='rect' and contains(@width,'108')])[2]定位的第二个矩形

要在元素上悬停，可以使用以下方法：

public void hoverOverElement(By.xpath(xpath)){
        action = new Actions(driver);
        webElement = driver.findElement(element);
        action.moveToElement(webElement).build().perform();
    }

如上面所示，xpath在哪里。

现在，您可以定位由//*[name()='g' and @class='google-visualization-tooltip']定位的已出现的工具提示元素并提取它的值。