Puppeteer 中的 QuerySelector 找不到元素（返回 null）答案

【问题标题】：QuerySelector in Puppeteer doesn't find element (returns null)Puppeteer 中的 QuerySelector 找不到元素（返回 null）
【发布时间】：2018-12-28 15:02:36
【问题描述】：

我正在尝试使用 Puppeteer 访问网站上的元素。以下是我的最小工作示例。当我尝试获取 span 元素时，page.evaluate 的输出为 null。当我将其更改为 p 元素时，它会正确输出一个 emtpy 对象。这是因为 span 元素有 display: none 吗？我需要做什么才能获得 span 元素？

(async() => {

    const browser = await puppeteer.launch({
        headless: true,
        ignoreHTTPSErrors: true,
        timeout: 1000
    });

    const page = await browser.newPage();

    await page.goto('https://example.com', {waitUntil: 'networkidle2'});

    const elem = await page.evaluate(() => {

        const elem = document.querySelector('span');
        return elem;

    })

    console.log("ELEM", elem)
    browser.close();

})();

【问题讨论】：

该 URL 上没有 span，但有两个 p。有所有的原因。
嗯，很奇怪。在 chrome 开发者控制台中，我可以看到一个带有 display: none 的 span。但是，当我查看源代码时没有这样的跨度，当我打开 Firefox 开发人员工具时也没有。这令人困惑！
哦不！我刚刚意识到这个跨度是由扩展添加的。

标签： javascript puppeteer

【解决方案1】：

一个额外的 span 元素被添加到页面 DOM 中，这导致为 document.querySelector() 指定的选择器不正确。

根据给出的信息，正确的选择器是'p'：

const elem = document.querySelector('p');

【讨论】：