puppeteer 简介

puppeteer是一个以headless模式运行浏览器的npm包，它提供高级API来通过DevTools协议控制chromium或者chrome，是google官方维护的。

• chrome：日常使用的可视化的浏览器。
• chromium：使用脚本来执行访问页面的相关操作，模拟真实浏览器的操作。

puppeteer 安装

1. 正常情况下的，但是由于某种网络原因，可能会导致下载失败

npm install puppeteer
# yarn add puppeteer

2. 手动安装chromium

npm install puppeteer --ignore-scripts
# yarn add puppeteer --ignore-scripts

增加--ignore-scripts是为了跳过下载chromium

然后自行下载对应版本chromium，指定下载好的chromium

const puppeteer = require('puppeteer');

let browser;

const launch = async () => {
    browser = await puppeteer.launch({
        executablePath: '../MacOS/Chromium'
    });
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    await page.screenshot({ path: 'demo.png' });
    browser.close();
    browser = null;
}

launch();

executablePath用来指定本地自行下载的chromium

注意：我在mac上这么用是好的，但是在CentOS Linux上指定后没有生效，最后采用的是切换成淘宝源去下载，走的默认下载chromium

puppeteer 在 CentOS上无法运行

在github上引用一个大神的建议，需要安装一些依赖

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

最后在使用是需要添加--no-sandbox参数

const puppeteer = require('puppeteer');

let browser;

const launch = async () => {
    browser = await puppeteer.launch({
        args: [ '--no-sandbox' ]
    });
    const page = await browser.newPage();
    await page.goto('https://www.baidu.com');
    await page.screenshot({ path: 'demo.png' });
    browser.close();
    browser = null;
}

launch();

解决方法来自https://github.com/GoogleChrome/puppeteer/issues/391

puppeteer使用

详情的使用文档：

1. 中文
2. 官方

下面列一些我在开发中常使用的

实例化browser：启动浏览器

const puppeteer = require(puppeteer);
const browser = puppeteer.launch({
    executablePath: '', // 指定可运行的浏览器路径，如果是相对路径，则相对当前工作路径
    timeout: 30000, // 等待浏览器实例启动的最长时间（以毫秒为单位),默认是 30000 (30 秒)，设置为 0 是禁用超时
})

browser相关设置和操作

1. close()：关闭浏览器
2. newPage()：创建一个新的标签页，返回的是page实例（页面的）

page相关设置和操作

1. goto(url[, option])：跳转页面

page.goto('https://www.baidu.com', {
    timeout: 30000, // 跳转等待时间，单位是毫秒，默认30秒，0为一直等待，和page.setDefaultNavigationTimeout(timeout)一致
    waitUntil: 'load', // 默认load
})

waitUntil：

• load：页面的load事件触发时
• domcontentloaded：页面的DOMContentLoaded事件触发时
• networkidle0：不再有网络连接时触发，至少500ms后
• networkidle2：只有2个网络连接时触发，至少500ms后

2. browser()：获取当前page实例所属的browser实例
3. close()：关闭当前页面
4. $(selector)：在页面内执行document.querySelector然后返回找到元素，返回的是个promise。如果没有找到返回null
5. $$(selector)：在页面执行document.querySelectorAll，返回的是找到的元素数组。如果没有找到返回[]
6. $$eval(selector, pageFunction[, ...args])：在页面内执行Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给pageFunction。

// findData的值为pageFunction return回来的值
const findData = await page.$$eval('div', (divs, a, b) => {
    // 这里的a, b对应外面传入的 arg1, arg2
    return divs.map(el => ({
        a,
        b
    }))
}, arg1, arg2)

注意，pageFunction外面的变量在内部获取不到，除非是传入进来

7. $eval(selector, pageFunction[, ...args])：在页面内执行 document.querySelector，然后把匹配到的元素作为第一个参数传给pageFunction
8. on('close'): 注册事件监听page关闭，在关闭时触发

参考：https://zhaoqize.github.io/puppeteer-api-zh_CN/