Puppeteer技术疑问：为何直接浏览与Puppeteer浏览页面显示不同？

直接浏览和用Puppeteer访问网站显示不一样，哪怕复制了Cookie也没用，核心原因是Puppeteer的自动化环境和真实浏览器存在诸多差异，下面是具体的解决思路和操作：

1. 消除浏览器指纹检测 #

网站会通过浏览器特征（比如UA、自动化标识）识别是不是爬虫/自动化工具，直接改这几个参数：

• 启用新版无头模式：headless: 'new'，老版无头模式特征太明显
• 禁用自动化控制标识：添加启动参数--disable-blink-features=AutomationControlled
• 设置和真实浏览器完全一致的User-Agent：去真实Chrome的navigator.userAgent里复制字符串，在启动参数里加--user-agent=xxx

2. 补全本地存储数据 #

除了Cookie，网站还依赖localStorage、sessionStorage、IndexedDB这些本地数据渲染内容：

• 真实浏览器控制台执行JSON.stringify(localStorage)，把结果复制出来
• 在Puppeteer里用page.evaluate()导入：

const localStorageData = '{"key":"value"}'; // 替换成你复制的内容
await page.evaluate((data) => {
  Object.keys(data).forEach(key => localStorage.setItem(key, data[key]));
}, JSON.parse(localStorageData));

3. 匹配真实请求头和加载行为 #

• 复制真实浏览器的所有请求头（比如Accept-Language、Referer），用page.setExtraHTTPHeaders()设置
• 页面加载时用waitUntil: 'networkidle2'，确保和真实浏览一样等网络请求稳定后再操作
• 禁用Puppeteer默认的缓存，或者模拟真实浏览器的缓存策略：page.setCacheEnabled(true)

示例代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      '--disable-blink-features=AutomationControlled',
      '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
    ]
  });
  const page = await browser.newPage();
  
  // 导入真实Cookie
  const cookies = [/* 粘贴从Chrome导出的Cookie数组 */];
  await page.setCookie(...cookies);
  
  // 设置请求头
  await page.setExtraHTTPHeaders({
    'Accept-Language': 'zh-CN,zh;q=0.9',
    'Referer': 'https://www.google.com/'
  });
  
  // 导入localStorage
  const localStorageData = '{"your-key":"your-value"}';
  await page.evaluate((data) => {
    Object.keys(data).forEach(key => localStorage.setItem(key, data[key]));
  }, JSON.parse(localStorageData));
  
  await page.goto('https://www.oddsportal.com/', {
    waitUntil: 'networkidle2'
  });
  
  await page.screenshot({ path: 'test.png' });
  await browser.close();
})();

内容的提问来源于stack exchange，提问作者Alex