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方法内部调用了setUserAgent和setViewport。

示例

使用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 设备。