Puppeteer 为相同的 URL 提供不同的页面 Headless vs Headful

Question

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

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

傀儡代码：

(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')

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

这些是捕获的屏幕截图：

无头模式：

无头模式关闭：

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

    const context = await browser.createIncognitoBrowserContext();

    const page = await context.newPage();

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

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 的库可能会解决您的问题。您可能想尝试一下。