HTML 无法进入 node js puppeteer

Question

错误无法读取 null 的属性“querySelectorAll”我正在抓取这个网站，当我在控制台中写下以下几行时，它会给我 HTML。但是当我从 puppeteer 中抓取 HTML 时，它给了我错误document.querySelectorAll('#stroke-play-container > .stroke-play-leaderboard > .the-leaderboard.with-rolex > table.leaderboard.leaderboard-table.large')[0].nextSibling;代码'use strict'; const puppeteer = require('puppeteer'); function run() { return new Promise(async (resolve, reject) => {    try {        const browser = await puppeteer.launch({        headless : false        });        const page = await browser.newPage();        await page.goto("https://www.pgatour.com/leaderboard.html");        await page.evaluate(`window.scrollTo(0, document.body.scrollHeight)`);        await page.waitFor(5000);            let urls = await page.evaluateHandle(() => {            let results = [];            var parser = new DOMParser();                        var node = document.querySelectorAll('#stroke-play-container > .stroke-play-leaderboard > .the-leaderboard.with-rolex > table.leaderboard.leaderboard-table.large')[0].nextSibling;                       if(node){            var $ = parser.parseFromString(node, 'text/html');                                  return {                name: $.querySelectorAll('table > tbody:nth-child(1) > tr > td.player-name > div > div.player-name-col').innerText            };            }            else{                return 'error';            }        })        browser.close();        return resolve(urls);    } catch (e) {        return reject(e);    }})} run().then(console.log).catch(console.error);

Answer 1

像这样尝试：

let names = await page.evaluate(() => {

  let css = '.the-leaderboard.with-rolex > table.leaderboard.leaderboard-table.large + div div.player-name-col'

  let divs = [...document.querySelectorAll(css)]

  return divs.map(div => div.innerText)

})

我不确定你试图用 DOMParser 完成什么，你永远不需要使用它。

Answer 2

编辑：正如评论中所指出的，请注意 pgatours.com 的服务条款，它不允许进行抓取、抓取等操作。以下解决方案仅用于说明如何解决您的问题背后的通用技术点.

我认为这可能是由于 Puppeteer 使用的默认视口大小所致。该网站以较小的分辨率隐藏了您正在寻找的内容，因此出现了问题。

使它对我有用的是明确指定视口大小，如下所示：

page.setViewport({ width: 1200, height: 1000 })

所以你的代码会变成：

'use strict';

 const puppeteer = require('puppeteer');

 function run() {

 return new Promise(async (resolve, reject) => {

    try {

        const browser = await puppeteer.launch({

        headless : false

        });

        const page = await browser.newPage();

        page.setViewport({ width: 1200, height: 1000 })

        await page.goto("https://www.pgatour.com/leaderboard.html");

        await page.evaluate(`window.scrollTo(0, document.body.scrollHeight)`);

        await page.waitFor(5000);

    

        let urls = await page.evaluateHandle(() => {

            let results = [];

            var parser = new DOMParser();

            

            var node = document.querySelectorAll('#stroke-play-container > .stroke-play-leaderboard > .the-leaderboard.with-rolex > table.leaderboard.leaderboard-table.large')[0].nextSibling;

           

            if(node){

            var $ = parser.parseFromString(node, 'text/html');

            

          

            return {

                name: $.querySelectorAll('table > tbody:nth-child(1) > tr > td.player-name > div > div.player-name-col').innerText

            };

            }

            else{

                return 'error';

            }

        })

        browser.close();

        return resolve(urls);

    } catch (e) {

        return reject(e);

    }

})

}

run().then(console.log).catch(console.error);