Puppeteer – 设备模拟

Puppeteer提供了模拟各种设备的API,例如模拟iphone。

模拟设备的用户代理和视口

模拟设备通常会涉及2个方面:

  • 用户代理(user agent)模拟
  • 视口(viewport)模拟

让我们模拟一个移动设备:


const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false, devtools: true }); const page = await browser.newPage(); // 模拟一个 iPhone X await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'); await page.setViewport({ width: 375, height: 812 }); await page.goto('https://www.qikegu.com'); // await browser.close(); })();

上面的示例模拟iPhone X,访问指定网页。使用setUserAgent方法设置iPhone X的用户代理,使用setViewport设置iPhone X的视口。

对于多个页面,每个页面都可以有自己的用户代理和视口定义。

上面示例的chrome运行界面:

图

可以看到,从devtools中的控制台查看用户代理和视口,确实是我们设置的值。

设备描述(DeviceDescriptors)

实际上,要模拟iPhone X,不必显式地设置 iPhone X 的用户代理和视口,Puppeteer中定义了一系列的设备描述以及emulate方法,emulate方法根据预定义的设备描述(包含用户代理参数与视口参数),就可以模拟该设备。emulate方法内部调用了setUserAgentsetViewport

示例

使用emulate方法模拟iphone x:


const puppeteer = require('puppeteer'); // 导入设备描述库 const devices = require('puppeteer/DeviceDescriptors'); (async () => { const browser = await puppeteer.launch({ headless: false, devtools: true }); const page = await browser.newPage(); // 模拟iPhone X await page.emulate(devices['iPhone X']); await page.goto('https://www.qikegu.com'); // await browser.close(); })();

设备描述定义在Puppeteer库中的DeviceDescriptors.js文件中,里面包含了常见的设备定义,例如iphone x的定义:

  {
    'name': 'iPhone X',
    'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
    'viewport': {
      'width': 375,
      'height': 812,
      'deviceScaleFactor': 3,
      'isMobile': true,
      'hasTouch': true,
      'isLandscape': false
    }
  },

设备描述主要包含了设备的用户代理、视口的定义。emulate方法根据预定义的设备描述,就可以模拟 iphone x 设备。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载