javascript - Puppeteer 为同一 URL 提供不同的页面 Headless 与 Headful

Question

我不太确定为什么会发生这种情况，但是，我正在尝试从 Google 搜索结果中抓取结果，并且当您向下滚动时，结果会动态加载。我试图通过向下滚动来模拟这一点，但是当 puppeteer 在 headless 模式下运行时，它不会加载所有搜索结果，而当 headless 模式关闭时，它会返回正确数量的结果。

我发现我要查找的信息存储在类为“bkWMgd”的 div 中，您可以看到总共有 7 个 div:

puppeteer 师代码:

(async (searchQuery) => {
    const browser = await puppeteer.launch({
        //headless: false
    });

    const page = await browser.newPage();

    await page.goto('https://google.com/search?q='+searchQuery, { waitUntil: 'networkidle2' });

    //Wait for one of the div classes to load
    await page.waitForSelector('div[class=bkWMgd]');


    //Scroll all the way down
    await page.evaluate(() => window.scrollTo(0,document.body.scrollHeight));

    //Counts how many div with class 'bkWMgd' there are
    const resp = await page.evaluate(() => document.querySelectorAll('div[class=bkWMgd]').length);

    console.log(resp);

    await page.screenshot({path: 'example.png'});

    await browser.close();

})('cats')

在 headless 模式 console.logs 3 下运行此代码并在关闭 headless 模式的情况下运行它会输出正确的数字 7

这些是捕获的屏幕截图:

headless 模式:

headless 模式关闭:

由于某种原因，似乎输出了不同的结果。我尝试创建一个 IngocnitoContext:

    const context = await browser.createIncognitoBrowserContext();

    const page = await context.newPage();

但是，它仍然会导致不同的结果，因此我只是想知道是否有一种方法可以确保 headless 和 headful 产生相同的结果。我感兴趣的结果是关闭 headless 时产生的结果

Answer 1

Google(和其他网站)可能会根据您的用户代理和屏幕尺寸向您提供不同的内容。尝试显式设置它们，以便获得一致的结果:

设置窗口大小

const browser = await puppeteer.launch({
    headless: true,
    args: [
      '--window-size=1920,1080',
      '--user-agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"'
    ]
});

设置用户代理

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');

完整示例

(async (searchQuery) => {
    const userAgent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36';
    const browser = await puppeteer.launch({
      headless: true,
      args: [
        '--window-size=1920,1080',
        `--user-agent="{userAgent}"`
      ]
    });

    const page = await browser.newPage();

    await page.setUserAgent(userAgent);

    await page.goto('https://google.com/search?q='+searchQuery, { waitUntil: 'networkidle2' });

    //Wait for one of the div classes to load
    await page.waitForSelector('div[class=bkWMgd]');


    //Scroll all the way down
    await page.evaluate(() => window.scrollTo(0,document.body.scrollHeight));

    //Counts how many div with class 'bkWMgd' there are
    const resp = await page.evaluate(() => document.querySelectorAll('div[class=bkWMgd]').length);

    console.log(resp);

    await page.screenshot({path: 'example.png'});

    await browser.close();

})('cats')

更新

我很惊讶设置用户代理不起作用。我已更新示例以通过 --user-agent 命令行开关指定用户代理。尝试一下也没什么坏处。

有一个名为 Puppeteer Stealth 的库这可能会解决您的问题。您可能想尝试一下。