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

Question

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

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

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

我得到未定义

但是，大多数网站的情况并非如此，例如我的代码在其中运行的 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();
};

我尝试添加 bypassBotDetectionSystem() 函数，如 this article 中的建议。 ，但没有成功。我认为这不是问题，因为就像我说的，我可以轻松地在 Chromium 中导航内容。

感谢您的帮助!

Answer 1

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

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

示例:

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);