PUPPETEER - 无法使用 page.evaluate(() => document.querySelectorAll()) 提取某些网站上的元素

Question

我正在尝试在终端中选择和console.log() 一个网站的所有链接的NodeList。但是我无法访问某些网站 - google.com、facebook.com、instagram.com。

我知道元素在那里，因为我当然可以将它们记录在实际的 Chromium 控制台中，该控制台使用document.querySelectorAll('a') 单独加载。但是当我尝试在节点终端中提取和记录链接时，使用

const links = await page.evaluate(() => document.querySelectorAll('a'))
console.log(links)

我收到undefined

但是，对于大多数网站来说，情况并非如此，例如 yahoo.com、linkedin.com，我的代码在这些网站上工作。这里是：

const URL = 'https://instagram.com/';
const scrape = async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.setViewport({
        width: 1240,
        height: 680
    });
    await page.goto(URL, { waitUntil: 'domcontentloaded' });
    await page.waitFor(6000);
    const links = await page.evaluate(() => document.querySelectorAll('a'));
    console.log(links);
    await page.screenshot({
        path: 'ig.png'
    });
    await browser.close();
};

我尝试按照this article 中的建议添加bypassBotDetectionSystem() 函数，但没有奏效。我认为这不是问题所在，因为就像我说的，我可以轻松浏览 Chromium 中的内容。

感谢您的帮助！

Answer 1

您正在尝试使用page.evaluate 方法返回DOM 元素，但这不可能，因为如果传递给page.evaluate 的函数返回non-Serializable 值，那么page.evaluate 将解析为undefined就像你的情况一样。

如果您想获取ElementHandle 的数组，您可以改用page.$$ 方法。

例子：

const links = await page.$$('a'); // returns <Promise<Array<ElementHandle>>>

但是，如果您只想获取属性的所有值（例如href），您可以采用page.$$eval 方法，它在页面内运行Array.from(document.querySelectorAll(selector))，并将其作为第一个参数传递给pageFunction

例子：

const hrefs = await page.$$eval('a', links => links.map(link => link.href));
console.log(hrefs);

Answer 2

 const hrefs = await page.$$eval('a', anchors => [].map.call(anchors, a => a.href));