谷歌大法好之无头浏览器 - Puppeteer

简介起步 运行环境安装 Puppeteer官方样例 - 实现网页截图 async/await 常用 API 浏览器配置模拟页面访问选择器等待模拟人的操作 按键、组合键 在页面中执行代码获取当前 HTML 代码 使用 REPL 操作 Puppeteer资料链接

简介

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Puppeteer 是一个 node 库，提供了一组高级 API，通过 DevTools 协议控制无界面的 Chromium 浏览器 (你也可以配置成有界面的)。Puppeteer 允许开发者从浏览器之外的环境与 Chromium 进行交互，可以完全模拟人类能在浏览器上所能完成的大部分操作。

起步

运行环境

Puppeteer 至少需要 Node v6.4.0，但网上资料基上本都大量使用了 async/await，建议使用 Node v7.6.0 或更高版本。

安装 Puppeteer

直接安装： npm i puppeteer 或者 yarn add puppeteer直接安装会顺便安装 Chromium 浏览器。直接安装需要你的终端也可以翻墙。忽略安装 Chromium npm install puppeteer --ignore-scripts可以使用本地的 Chrome(v59+).

官方样例 - 实现网页截图

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://github.com/GoogleChrome/puppeteer'); await page.screenshot({path: 'puppeteer.png'}); await browser.close(); })(); 代码实现了网页截图，流程如下： 通过 puppeteer.launch() 创建一个浏览器对象 browser。通过 browser 新打开一个标签页，获取页面对象 page。 通过 page.goto() 转到指定页面。调用 page.screenshot() 进行截图并保存。关闭浏览器。

async/await

ES2017 引入了 async/await，终结了回调处理问题。Node v7.6.0 后原生支持该特性。async async 函数可以直接使用，没有回调的阴影。async 函数总是返回一个 Promise 对象。如果不是，就隐式调用 prpose.resolve 来转换成一个 Promise。await 等待后面的 Promise 执行完成后再进行下一步操作。await 关键字后面是一个 Promise。如果不是，就隐式调用 prpose.resolve 来转换成一个 Promise。

常用 API

浏览器配置

const browser = await puppeteer.launch({ // 是否显示浏览器界面(或者说是否无头)。 headless: false, // 使用本地 Chrome 或 Chromium，Chrome 版本 59+ executablePath: '/opt/google/chrome/chrome', // 每一次模拟操作的间隔。 slowMo: 100, args: [ '--proxy-server=127.0.0.1:8118' // 代理 // '--no-sandbox', '--disable-setuid-sandbox' ] });

模拟

await page.emulate("Android 0.2"); // 模拟 await page.setViewport({width:1920, height:1080}); // 设置窗口大小 await page.setUserAgent('IE6.0'); // 设置 UA

页面访问

const page = await page.goto(url, { timeout: 5000 }); // 访问页面超时时间。默认 30 秒。

选择器

await page.$(selector); await page.$$(selector); // 获取指定选择器的内容 const inHtml = await page.$eval(selector, ele => ele.innerHTML); const html = await page.$eval(selector, ele => ele.outerHTML); const array = await page.$$eval('p', eles => Array.from(eles).map(ele => ele.innerHTML));

等待

await page.waitForNavigation(options); // 等待页面 HTML、CSS、JS 加载完成。 await page.waitForSelector('#loginForm'); // 等待选择器对应 DOM 出现。 默认 30 秒超时。 await page.waitForXPath('#loginForm'); // 等待 XPath 对应 DOM 出现。默认 30 秒超时。 await page.waitFor(500); // 等待 500 ms。

模拟人的操作

await page.click('#submit'); // 模拟点击。 await page.type("#input", "1111111111"); // 向指定元素输入内容。 await page.focus("#input"); await page.keyboard.type("1111111111", {delay: 50}); // 通过键盘模拟人的输入。 await page.mouse.click(x, y); // 鼠标点击

按键、组合键

// 全选 Ctrl + A await page.keyboard.down("ControlLeft"); // 按下 Ctrl await page.keyboard.down("a"); // 按下 A await page.keyboard.up("ControlLeft"); // 弹起 Ctrl await page.keyboard.up("a"); // 弹起 A await page.keyboard.press("Backspace"); // 点击 Backspace, 删除选中内容。

在页面中执行代码

page.evaluate(() => console.log("The BigBrother is watching you!"));

获取当前 HTML 代码

await page.goto('http://127.0.0.1:8080/'); await page.waitFor(10000) const html = await page.content() fs.writeFileSync('index.html',html)

使用 REPL 操作 Puppeteer

因为代码不可避免的会采用很多 await，而 await 又需要在 async 方法体中，因此使用 REPL 调试 Puppeteer 简直反人类。Node v10.0.0 中新增了 --experimental-repl-await 选项，使得 await 在 REPL 中获得了顶级关键字的支持。使用 REPL 操作 Puppeteer 需要安装并切换到 Node v10.0.0+，然后 node --experimental-repl-await 进入 REPL。

资料链接

文档：https://pptr.devGithub：https://github.com/GoogleChrome/puppeteer