page.evaluate 返回空值但浏览器控制台返回正确值答案

【问题标题】：page.evaluate returning null values but browser console returning correct valuespage.evaluate 返回空值但浏览器控制台返回正确值
【发布时间】：2019-09-22 23:09:43
【问题描述】：

我正在将 Puppeteer 用于 Web 抓取应用程序。 Page.evaluate 函数返回空值。但是浏览器控制台中的相同函数会返回正确的值。

const puppeteer = require('puppeteer');
let scrape = async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  var ticker = 'DIS';
  var my_url = 'https://seekingalpha.com/symbol/'  + ticker + '/momentum/moving-averages'; 
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0');
  await page.goto(my_url);


  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
  const result = await page.evaluate(() => {
    const elements = Array.from(document.querySelectorAll('table tr td'));
    let links = elements.map(element => {
        return element.href
    })
    console.log(links, 'inside page.evaluate');
    return links;
  });
    browser.close();
    return result;
};  


scrape().then((value) => {
  console.log(value); // Success!

得到以下结果....

PAGE LOG: JSHandle@array inside page.evaluate
[ null, null, null, null, null, null, null, null, null, null ]

在浏览器控制台中，我得到....

document.querySelectorAll('table tr td')
NodeList(10) [ td.left.left-text, td.middle.center-text, td.middle.center-text, td.middle.center-text, td.right.center-text, td.left.left-text, td.middle.center-text.red, td.middle.center-text.green, td.middle.center-text.green, td.right.center-text.green ]

希望有任何帮助...

在 Thomas 的建议下，我能够进行以下调整，并且现在可以使用...

sma[0] = await page.$eval('table tr:nth-child(2) td:nth-child(2)', el => {return el.innerHTML });
  sma[1] = await page.$eval('table tr:nth-child(2) td:nth-child(3)', el => {return el.innerHTML });
  sma[2] = await page.$eval('table tr:nth-child(2) td:nth-child(4)', el => {return el.innerHTML });
  sma[3] = await page.$eval('table tr:nth-child(2) td:nth-child(5)', el => {return el.innerHTML });

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

您的console.log(links, 'inside page.evaluate') 正在浏览器运行时内执行。任何从浏览器记录或发送到 Node.js 环境的数据都需要可序列化（请参阅docs），而 DOM 元素则不然。因此，改为显示null。

要查询元素，可以使用函数page.$$(selector)。示例：

const tds = await page.$$('table tr td');

浏览器内的代码运行良好。我认为您的实际问题是您的代码正在查询 td 元素，然后尝试将 td 元素映射到它们的 href 值。您可能想迭代 a 元素，而不是我假设。所以可能你的选择器应该是'table tr td a'。

【讨论】：