如何让 puppeteer 从页面上的元素中获取动态类属性及其 textContent答案

【问题标题】：How to make puppeteer grab a dynamic class attribute and it textContent from an element on a page如何让 puppeteer 从页面上的元素中获取动态类属性及其 textContent
【发布时间】：2021-02-10 05:31:12
【问题描述】：

我正在尝试从游戏网站上抓取特定 Div 标记的内容。起初，当您访问该网站时，div 标签将包含未完成类的空内容。例子

<div class="ball ball-"><div>

然后每 45 秒后 textContent 和 class 属性将被动态添加例子

    <div class="ball ball-red">45<div>

每 45 秒后，textContent 和 class 属性将更改为另一个值。

一开始可能是这样的

 <div class="ball ball-red">23<div>

45 秒后它可能会变成这样

 <div class="ball ball-green">3<div>

再过 45 秒后，它可能看起来像这样

    <div class="ball ball-blue">33<div>

我怎样才能让 puppeteer 访问这样的页面，等待类和 textcontent 添加到 div 标签中，然后抓取任何类也抓取 textcontent 并将其记录到控制台关闭 puppetter 并再次运行它.

我尝试了以下代码并一直告诉我 selectElemClass 未定义或无法读取未定义的属性长度。请帮忙。

您可以检查页面上 6 球的结果，以查看我试图解释的行为。这是website url 我只是想从左边开始获取 firstball 的类和文本上下文。如果我能成功地让它工作，那么我将对其余 5 个球重复相同的工作过程。

const puppeteer = require("puppeteer");

async function scrapeData(url){
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const selectElemClass = await page.evaluate(() => {
    return document.querySelectorAll(".ball")[2].classList[1];
});
//console.log(selectElemClass);
const hasClassArived = await page.waitForFunction(function(selectElemClass){
   return selectElemClass.length > 6;
},{timeout:60000});
hasClassArived ? console.log(selectElemClass) : console.log("failed");
browser.close();
}
scrapeData("https://logigames.bet9ja.com/Games/Launcher?gameId=11000&provider=0&sid=&pff=1&skin=201");

【问题讨论】：

标签： javascript node.js puppeteer

【解决方案1】：

你可以试试这样的：

const puppeteer = require("puppeteer");

async function scrapeData(url){
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  await page.waitForFunction(() => {
      return document.querySelectorAll(".ball")[2].innerText !== '';
  }, { timeout: 60000 });

  const data = await page.evaluate(() => {
    const ball = document.querySelectorAll(".ball")[2];
    return {
      number: ball.innerText,
      color: ball.classList[1].split('-')[1],
    };
  });
  console.log(data);

  browser.close();
}
scrapeData("https://logigames.bet9ja.com/Games/Launcher?gameId=11000&provider=0&sid=&pff=1&skin=201");

【讨论】：