Cheerio 网络抓取 ul > li 属性

Question

我想从这个 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);
}

Answer 1

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

Answer 2

后台返回HTML时，您要查找的class中没有List项。外观如下：

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

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

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

这是 url： 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"

希望对您有所帮助！

Answer 3

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

然后你可以编写 WSL，它也可以呈现 javascript 页面，你可以使用 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'}

Cheerio 网络抓取 ul > li 属性

Cheerio web scraping ul > li attribute

request

node.js

web-scraping

cheerio

web-scraping-language