在网络抓取中获取<span>文本

Question

我正在使用Puppeteer和jsDOM抓取以下站点：https://www.lcfc.com/matches/results。

我想要每场比赛的球队名称，所以在控制台上我使用以下名称：

document.querySelectorAll('.match-item__team-container span')
  .forEach(element => console.log(element.textContent));

在控制台上，名称显示为ok，但是当我在代码中使用此名称时，它什么也不会返回。

这是我的代码：

const puppeteer = require('puppeteer');
const jsdom = require('jsdom');
(async () => {
  try {
    const browser = await puppeteer.launch() ;
    const page = await browser.newPage();
    const response = await page.goto('https://www.lcfc.com/matches/results');
    const body = await response.text();
    const { window: { document } } = new jsdom.JSDOM(body);

    document.querySelectorAll('.match-item__team-container span')
      .forEach(element => console.log(element.textContent));

    await browser.close();
  } catch (error) {
    console.error(error);
  }
})();

我没有任何错误。有什么建议吗？谢谢。

我现在尝试使用此代码，但仍然无法正常工作。我显示了代码和控制台图片：

const puppeteer = require('puppeteer');
(async () => {
  try {
    const browser = await puppeteer.launch() ;
    const page = await browser.newPage();
    await page.waitForSelector('.match-item__team-container span');
    const data = await page.evaluate(() => {
      document.querySelectorAll('.match-item__team-container span')
          .forEach(element => console.log(element.textContent));
    });
    //listen to console events in the chrome tab and log it in nodejs process
    page.on('console', consoleObj => console.log(consoleObj.text()));

    await browser.close();
  } catch (error) {
    console.log(error);
  }
})();

Answer 1

以伪造方式进行操作，并在等待选择器通过evaluate出现之后，使用waitForSelector来运行代码

await page.waitForSelector('.match-item__team-container span');
const data = await page.evaluate(() => {
  document.querySelectorAll('.match-item__team-container span')
      .forEach(element => console.log(element.textContent));
    //or return the values of the selected item
   return somevalue; 
});
//listen to console events in the chrome tab and log it in nodejs process
page.on('console', consoleObj => console.log(consoleObj.text()));

evaluate在chrome的活动标签内运行代码，因此您不需要jsDOM来解析响应。

更新 新的超时问题是因为页面加载时间太长：请使用{timeout : 0}

const data = await page.evaluate(() => {
  document.querySelectorAll('.match-item__team-container span')
      .forEach(element => console.log(element.textContent));
    //or return the values of the selected item
   return somevalue; 
},{timeout:60000});