javascript - 抓取全球速卖通：数据属性在检查元素之前不会加载

Question

我正在尝试在 Aliexpress.com 上获取有关产品的一些信息

Here is a sample product i tried : https://www.aliexpress.com/item/32905045358.html?spm=2114.search0104.3.9.55e81bfaYkNYa0&ws_ab_test=searchweb0_0%2Csearchweb201602_9_10065_10068_319_10546_10059_10884_317_10548_10887_10696_321_322_10084_453_10083_454_10103_10618_10307_537_536%2Csearchweb201603_52%2CppcSwitch_0&algo_expid=b2cb9169-93e1-4d1d-a2a9- 01caee37e0b4-1&algo_pvid=b2cb9169-93e1-4d1d-a2a9-01caee37e0b4

我想要什么：从每个变体图像中获取 data-spm-anchor-id 属性。

问题：在我尝试手动检查元素之前它不会加载

页面加载完成后尝试获取属性：

document.querySelector('.sku-property-image').querySelector('img')

结果 ：

<img src="https://ae01.alicdn.com/kf/HTB1HAk8UgHqK1RjSZFkq6x.WFXaB/Boruto-Naruto-Hoodies-Jacket-Men-3D-Hoodie-Akatsuki-Coat-Uchiha-Itach-Cosplay-Costume-Kakashi-Hoodies-Sweatshirts.jpg_50x50.jpg" title="2">

检查元素以查看 data-spm 是否存在：

然后在控制台上再次运行查询，您将看到：

<img src="https://ae01.alicdn.com/kf/HTB1HAk8UgHqK1RjSZFkq6x.WFXaB/Boruto-Naruto-Hoodies-Jacket-Men-3D-Hoodie-Akatsuki-Coat-Uchiha-Itach-Cosplay-Costume-Kakashi-Hoodies-Sweatshirts.jpg_50x50.jpg" title="2" data-spm-anchor-id="a2g0o.detail.1000016.i1.570f6bf9tarSlz">

检查元素后突然出现 data-spm-anchor-id attr

我如何通过 puppeteer 或 Cheerio 以编程方式获得这个？

标签： javascriptjqueryweb-scrapingpuppeteercheerio

Answer 1

单击该图像时正在加载该属性。所以基本上你需要点击每个图像并获取属性。你可以这样做：

var images = await page.$$(".sku-property-image");
for(let image of images) {
  await image.click();
  //Wait for the attribute to be loaded.
  await page.waitFor(image => image.querySelector("img").getAttribute("data-spm-anchor-id"), {}, image);
  console.log(await page.evaluate(image => image.querySelector("img").getAttribute("data-spm-anchor-id"), image));
}