Puppeteer元素是console.log'可用的，但是在puppeteer中返回undefined

Question

我正在尝试抓取在h3标签下具有a标签的网页。我得到的a标签很好，但是当尝试获取h3的innerText时，我得到的是undefined值。

这是我要爬网的内容：

const puppeteer = require('puppeteer');
const pageURL = "https://producthunt.com";

const webScraping = async pageURL => {
    const browser = await puppeteer.launch({
        headless: false,
        arges: ["--no-sandbox"]
    });
    const page = await browser.newPage();
    let dataObj = {};

    try {
        await page.goto(pageURL, { waitUntil: 'networkidle2' });

        const publishedNews = await page.evaluate(() => {
            const newsDOM = document.querySelectorAll("main ul li");

            let newsList = [];
            newsDOM.forEach(linkElement => {
                const text = linkElement.querySelector("a").textContent;
                const innerText = linkElement.querySelector("a").innerText;
                const url = linkElement.querySelector("a").getAttribute('href');

                const title = linkElement.querySelector("h3").innerText;
                console.log(title);

                newsList.push({
                    title,
                    text,
                    url
                });
            });
            return newsList;
        });

        dataObj = {
            amount: publishedNews.length,
            publishedNews
        };

    } catch (e) {
        console.log(e);
    }

    console.log(dataObj);
    browser.close();
    return dataObj;
};

webScraping(pageURL).catch(console.error);

控制台日志很好用，但是操纵up的人抛出：

Cannot read property 'innerText' of null

Answer 1

看来您的解决方案工作正常，但是您无法控制h3标签是否为空。在访问innerText属性之前，请尝试添加if语句，或者使用我在下面留下的代码。

const puppeteer = require('puppeteer');
const pageURL = "https://producthunt.com";

const webScraping = async pageURL => {
    const browser = await puppeteer.launch({
        headless: false,
        arges: ["--no-sandbox"]
    });
    const page = await browser.newPage();
    let dataObj = {};

    try {
        await page.goto(pageURL, { waitUntil: 'networkidle2' });

        const publishedNews = await page.evaluate(() => {
            let newsList = [];
            const newsDOM = document.querySelectorAll("main ul li");

            newsDOM.forEach(linkElement => {
                const aTag = linkElement.querySelector("a");

                const text = aTag.textContent;
                const innerText = aTag.innerText;
                const url = aTag.getAttribute('href');

                let title = aTag.querySelector("h3");
                // there may be some <a> without an h3, control
                // the null pointer exception here, accessing only
                // if title is not 'null'.
                if (title) title = title.innerText;

                console.log(title);

                // changed the object structure to add a key for each attr
                newsList.push({
                    title: title,
                    text: text,
                    url: url
                });
            });

            return newsList;
        });

        // changed the object structure to add a key for the array
        dataObj = {
            amount: publishedNews.length,
            list: publishedNews
        };

    } catch (e) {
        console.log(e);
    }

    console.log({receivedData: dataObj});
    browser.close();
    return dataObj;
};

webScraping(pageURL).catch(console.error);

让我知道这是否可以解决您的问题！