类与 puppeteer 的数据抓取问题

Question

我正在尝试使用 puppeteer 从该站点 https://www.bynogame.com/tr/oyunlar/knight-online/gold-bar 抓取所有价格数据。

我可以一个一个地报废价格，但是我无法获取所有的p元素，返回空数据。这是我的代码，可以一个一个地废弃，下面的代码可以废弃所有不起作用的数据。我哪里做错了？

const puppeteer = require("puppeteer");
const gb = async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.bynogame.com/tr/oyunlar/knight-online/gold-bar');

    const data = await page.$eval('body > div.container.mb-5 > div > div:nth-child(1) > div.col-md-18.order-1.order-sm-12 > div > div:nth-child(1) > div > div > div.col-md-21 > div > div.col-md-4 > div > div > div > p', el => el.textContent); //Output is true
    
    await browser.close();   
    console.log(data)
};
gb();

//Here is not work.
const data = await page.$$eval('.col-md-24 mb-2 itemDiv .itemCard .row d-flex align-items-center .col-md-21 .row d-flex align-items-center .col-md-4 .row d-flex flex-column .col .div p', obj => obj.map(p => p.textContent));

Answer 1

https://www.bynogame.com/tr/oyunlar/knight-online/gold-bar 页中没有带有 .col-md-24 mb-2 itemDiv .itemCard .row d-flex align-items-center .col-md-21 .row d-flex align-items-center .col-md-4 .row d-flex flex-column .col .div p 选择器的元素。

您可以尝试进入页面，然后打开控制台并运行 document.querySelectorAll。例如：

document.querySelectorAll('.col-md-24 mb-2 itemDiv .itemCard .row d-flex align-items-center .col-md-21 .row d-flex align-items-center .col-md-4 .row d-flex flex-column .col .div p')

它显示了一个空数组，这意味着 none HTML 元素匹配给定的选择器。

您不需要这么长的选择器。当您在该页面时，您可以看到价格在 <p> 标签内，类为 font-weight-bolder text-black m-0。首先，通过查询 <p> 标签，检查是否有任何其他元素与价格共享相同的选择器，在控制台中使用类 of font-weight-bolder text-black m-0。

document.querySelectorAll('p.font-weight-bolder.text-black.m-0')
--- Output ---
NodeList(9) [ p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0, p.font-weight-bolder.text-black.m-0 ]

通过查看输出，发现返回的元素就是我要找的价格。因此，我可以将正确的选择器替换为 page.$$eval。最终代码将是

const puppeteer = require("puppeteer");
const gb = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.bynogame.com/tr/oyunlar/knight-online/gold-bar");
  // Get element with <p class="font-weight-bolder text-black m-0">
  const data = await page.$$eval("p.font-weight-bolder.text-black.m-0", (obj) =>
    obj.map((p) => p.textContent)
  );

  await browser.close();
  console.log(data);
};
gb();

类与 puppeteer 的数据抓取问题

Data scraping problem with all same classes with puppeteer

javascript

node.js

web-scraping

puppeteer

node-modules

类 与 puppeteer 的数据抓取问题

Data scraping problem with all same classes with puppeteer

javascript

node.js

web-scraping

puppeteer

node-modules

类与 puppeteer 的数据抓取问题