使用 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')

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

你不需要这么长的选择器。当您在页面上时，您可以看到价格在<p> 标签内，类别为font-weight-bolder text-black m-0。首先，通过在控制台中查询<p>标签，类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();