如何在Puppeteer中为所有标签页（含点击打开的）应用page.EmulateAsync？

核心思路 #

通过监听浏览器的PageCreated事件，在新标签页创建完成后立即为其应用相同的设备模拟配置，确保所有页面（包括通过target="_blank"打开的页面）都使用移动端环境。

具体实现代码 #

修改原代码，添加页面创建事件监听：

var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
{
    ExecutablePath = @"C:\Program Files\Google\Chrome\Application\chrome.exe",
    Headless = false,
    IgnoreHTTPSErrors = false
});

// 提前定义要使用的设备配置
DeviceDescriptor? deviceOptions = Puppeteer.Devices.GetValueOrDefault(DeviceDescriptorName.IPhone11ProMax);

// 监听新页面创建事件，自动应用设备模拟
browser.PageCreated += async (sender, e) =>
{
    var newPage = e.Page;
    await newPage.EmulateAsync(deviceOptions);
};

var page = await browser.NewPageAsync();
await page.EmulateAsync(deviceOptions);
await page.GoToAsync("https://example.com");

补充说明 #

• PageCreated事件会在浏览器创建任何新页面时触发，包括通过链接点击、JavaScript调用window.open()打开的新标签页。
• 务必在创建初始页面之前注册事件监听，避免遗漏早期创建的页面实例。
• 如果需要为不同页面设置差异化的模拟配置，可以在事件处理逻辑中根据页面的URL、标题等属性做针对性调整。

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