使用Puppeteer的emulate函数时如何强制设置User-Agent？

你遇到的直接修改iPhone对象属性无效的问题，是因为Puppeteer内置的设备配置对象是不可修改的冻结对象。可以通过以下两种方式实现自定义User-Agent：

方法1：复制设备配置并修改User-Agent后传入emulate #

通过解构赋值复制内置设备的配置，修改其中的userAgent字段，再将新配置传给page.emulate()：

const puppeteer = require('puppeteer')
const iPhone = puppeteer.devices['iPhone 13 Pro'];

// 复制设备配置并替换自定义User-Agent
const customiPhone = {
  ...iPhone,
  userAgent: '你的自定义User-Agent字符串'
};

(async () => {
    const browser = await puppeteer.launch({headless: false, slowMo: 250});
    const page = await browser.newPage();
    await page.emulate(customiPhone); // 使用修改后的配置
    await page.goto('https://www.google.com');
    
    // 验证UA是否生效
    console.log('当前User-Agent:', await page.evaluate(() => navigator.userAgent));
    
    await page.screenshot({
      path: 'test3.png',
      type: 'png',
      fullPage: true
    })
    console.log(await page.title())
    await browser.close();
})();

方法2：分开调用setViewport和setUserAgent #

page.emulate()本质是同时调用page.setViewport()和page.setUserAgent()，因此可以分开执行这两个方法，直接自定义UA：

const puppeteer = require('puppeteer')
const iPhone = puppeteer.devices['iPhone 13 Pro'];

(async () => {
    const browser = await puppeteer.launch({headless: false, slowMo: 250});
    const page = await browser.newPage();
    
    // 设置设备视口
    await page.setViewport(iPhone.viewport);
    // 设置自定义User-Agent
    await page.setUserAgent('你的自定义User-Agent字符串');
    
    await page.goto('https://www.google.com');
    
    // 验证UA是否生效
    console.log('当前User-Agent:', await page.evaluate(() => navigator.userAgent));
    
    await page.screenshot({
      path: 'test3.png',
      type: 'png',
      fullPage: true
    })
    console.log(await page.title())
    await browser.close();
})();

两种方法都能实现需求，方法2更灵活，适合只需要调整部分配置的场景。

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