Puppeteer--基本使用

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。

可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

 

一、环境和安装

Puppeteer推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高，centos服务器依赖偏稳定，v6很难使用headless Chrome，最好使用高版本服务器。

Puppeteer因为是一个npm的包，所以安装很简单：

npm i puppeteer

Puppeteer安装时自带一个最新版本的Chromium，可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。

如果不下载的话，启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。

 

二、使用例子

Puppeteer通过操作Browser实例来操作浏览器作出相应的反应。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  await page.screenshot({path: 'example.png'});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
})();

上述代码通过puppeteer的launch方法生成了一个browser的实例，对应于浏览器。

 

launch方法可以传入配置项，比较有用的是在本地调试时传入{headless:false}可以关闭headless模式。

const browser = await puppeteer.launch({headless:false})

 

browser.newPage方法可以打开一个新选项卡并返回选项卡的实例page，通过page上的各种方法可以对页面进行常用操作。上述代码就进行了截屏和打印pdf的操作。

 

一个很强大的方法是page.evaluate(pageFunction, ...args)，可以向页面注入我们的函数，这样就有了无限可能

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  const dimensions = await page.evaluate(() => {
    return {
       document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);
  await browser.close();
})();

需要注意的是evaluate方法中是无法直接使用外部的变量的，需要作为参数传入，想要获得执行的结果也需要return出来。

 

三、调试技巧

1.关掉无界面模式，有时查看浏览器显示的内容是很有用的。使用以下命令可以启动完整版浏览器：

const browser = await puppeteer.launch({headless: false})

 

2.减慢速度，slowMo选项以指定的毫秒减慢Puppeteer的操作。这是另一个看到发生了什么的方法：

const browser = await puppeteer.launch({ headless:false, slowMo:250 });

 

3.通过监听console事件，捕获console的输出,。在page.evaluate里调试代码时这也很方便：

page.on('console', msg => console.log('PAGE LOG:', ...msg.args)); // node环境设置监听浏览器环境的console事件

await page.evaluate(() => console.log(`url is ${location.href}`)); // 执行浏览器环境的console动作

 

4.启动详细日志记录，所有公共API调用和内部协议流量都将通过puppeteer命名空间下的debug模块进行记录

# Basic verbose logging

# Debug output can be enabled/disabled by namespace

env DEBUG="puppeteer:*" node script.js

# everything BUT protocol messages

env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js

# protocol session messages (protocol messages to targets)

env DEBUG="puppeteer:session" node script.js

# only Mouse and Keyboard API calls

env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network domain messages

env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

 

四、爬虫实践

很多网页通过user-agent来判断设备，可以通过page.emulate(options)来进行模拟。options有两个配置项，一个为userAgent，另一个为viewport可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  // other actions...
  await browser.close();
});

上述代码则模拟了iPhone6访问某网站，其中devices是puppeteer内置的一些常见设备的模拟参数。

很多网页需要登录，有两种解决方案：

1.让puppeteer去输入账号密码

常用方法：点击可以使用page.click(selector[, options])方法，也可以选择聚焦page.focus(selector)。

输入可以使用page.type(selector, text[, options])输入指定的字符串，还可以在options中设置delay缓慢输入更像真人一些。也可以使用keyboard.down(key[, options])来一个字符一个字符的输入。

 

2.如果是通过cookie判断登录状态的可以通过page.setCookie(...cookies)，想要维持cookie可以定时访问。

Tip：有些网站需要扫码，但是相同域名的其他网页却有登录，就可以尝试去可以登录的网页登录完利用cookie访问跳过扫码。

 

基本示例

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 100,       //放慢浏览器执行速度，方便测试观察
        args: [            //启动 Chrome 的参数，详见上文中的介绍
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-infobars',
            // '--window-size=1280,960',
        ],
    });
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    await page.type('#kw', 'puppeteer', {delay: 100});
    await page.click('#su')
    await page.waitFor(1000)
    const targetLink = await page.evaluate(() => {
        return [...document.querySelectorAll('.result a')].filter(item => {
            return item.innerText && item.innerText.includes('入门及实践')
        }).toString();            //   })[0].innerText;
    });
    console.log(targetLink);
    await page.goto(targetLink);
    await page.waitForNavigation();
    // browser.close();
})()