Cheerio 网页抓取 ul > li 属性答案

【问题标题】：Cheerio web scraping ul > li attributeCheerio 网页抓取 ul > li 属性
【发布时间】：2020-03-30 17:19:05
【问题描述】：

我想从这个 url 中抓取“data-price”，但它返回未定义。有什么想法吗？

https://i.stack.imgur.com/N9gei.png

async function variant() {
    const response = await axios("https://extrabutterny.com/collections/release-draws/products/nike-sb-dunk-low-pro-blue-fury-bq6817-400?variant=31800767021104");   
    console.log("response: ", response);
    const html = await response.data;
    const $ = cheerio.load(html);
    const id = $(".DrawApp-SizeChartList > li").attr("data-price");
    console.log(id);
}

【问题讨论】：

标签： node.js web-scraping request cheerio web-scraping-language

【解决方案1】：

我知道你已经接受了答案，但如果你使用https://github.com/whatsdis/web-scraping-language

然后你可以编写可以渲染 javascript 页面的 WSL，你可以使用 Xpath：

GOTO https://extrabutterny.com/collections/release-draws/products/nike-sb-dunk-low-pro-blue-fury-bq6817-400?variant=31800767021104

EXTRACT {'price':'*[@class="DrawApp-SizeChartList"]/li/@data-price'}

【讨论】：

【解决方案2】：

当后端返回 HTML 时，您要查找的类中没有 List 项。下面是它的外观：

<ul class="DrawApp-SizeChartList">
</ul>

没有列表项。这就是id 是undefined 的原因。 JavaScript 在浏览器中运行并填充列表。

好处是您无需运行浏览器/puppeteer 即可获得价格。该网站向后端查询以获取有关产品的详细信息。

这是网址： https://eb-draw.herokuapp.com/draws/4482352611376

您会在此处看到价格：

"variants": [
  {
    "id": 16793,
    "draw_id": 1764,
    "variant_id": "31800767021104",
    "variant_label": "8",
    "variant_price": "100.00",
    "winner_count": 3,
    "winners_left": 3,
    "current_entries": 0,
    "created_at": "2020-03-27 21:19:14",
    "updated_at": "2020-03-27 21:19:14"
  },
  ...
]

但是您从哪里获得产品的 ID？在这里：

$(".js-price-preview").attr("data-product-id")
// "4482352611376"

希望这会有所帮助！

【讨论】：

【解决方案3】：

当您发出请求时，网站会返回一些代码，这些代码将由您的浏览器处理。一些网站返回将构建页面的 javascript 代码。这是你的情况。该网站正在返回一些代码，这些代码需要浏览器来处理 Java 脚本，然后构建 HTML。
我不知道 axios 是否可以做到这一点，但您需要的是一个 无头浏览器。我建议你Puppeteer.
很好的教程here。

【讨论】：