Puppeteer-无头浏览器简介

Puppeteer是什么

Puppeteer 是一个 Node 库，它提供了高级的 API 并通过 DevTools 协议来控制 Chrome(或Chromium)。通俗来说就是一个 headless chrome 浏览器 (也可以配置成有 UI 的，默认是没有的)

image

Puppeteer 的 Logo 很形象，顾名思义像是一个被操控的傀儡、提线木偶

Puppeteer结构

image

• Puppeteer 使用 DevTools 协议 与浏览器进行通信
• Browser 实例可以拥有浏览器上下文
• BrowserContext 实例定义了一个浏览会话并可拥有多个页面、
• Page 至少有一个主框架(main frame)。 可能还有其他框架由 iframe 或 frame 创建
• frame 至少有一个执行上下文(默认的执行JavaScript的上下文)。框架可能有额外的与扩展关联的执行上下文
• Worker 具有单一执行上下文，以便于和 WebWorkers 交互

Puppeteer能做什么

• 生成网页截图或者 PDF
• 抓取单页应用(SPA)执行并渲染
• 做表单的自动提交、UI的自动化测试、模拟键盘输入等
• 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
• 在最新的无头浏览器环境里做测试、使用最新浏览器特性

安装

npm i puppeteer -S

默认会下载一个最新版本的Chromium，也可以通过一些配置跳过下载，此时需要配置启动参数 executablePath 来指定 Chromium 的位置。下载失败可以参考 Github Issue，或者使用如下方法快速安装

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer -S

如果 Mac 下下载时出现 mkdir 的权限问题，可以添加安装参数解决

sudo npm i puppeteer -S --unsafe-perm=true --allow-root

或者安装 puppeteer-cn

npm i puppeteer-cn -S

使用示例

最简单的例子，打开百度并关闭

const browser = await puppeteer.launch({
    headless: false  // 关闭无头模式
});

const page = await browser.newPage();
await page.goto('http://www.baidu.com/');
await browser.close();

打开百度，截图&生产PDF，然后关闭

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://www.baidu.com/');
await page.screenshot({path: 'baidu.png'});
// 目前只能在无头模式下生成pdf **https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions*

await page.pdf({path: 'baidu.pdf'})await browser.close();

在打开的页面里执行JS并返回结果

const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.trip.com/m/');
const dimensions = await page.evaluate(() => {
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
    deviceScaleFactor: window.devicePixelRatio
  }
});
console.log('Dimensions:', dimensions);
await browser.close();

监听 ​console​，你会看到熟悉的百度招聘的硬广

const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('console', msg => console.log(msg.type(), msg.text()));
await page.goto('https://www.baidu.com/');
await browser.close();

设置窗体尺寸

const browser = await puppeteer.launch({
  headless: false
});
const page = await browser.newPage();
// 模拟iPhone6的尺寸打开
await page.setViewport({
  width: 375,
  height: 667
});
await page.goto('https://www.trip.com/m/');

Performance Trace 性能数据捕获，之后将 ​trace.json​ 导入 DevTools -> Performance 即可查看

const browser = await puppeteer.launch({
    headless: false
});
const page = await browser.newPage();
// 设置数据文件，并包含截图
await page.tracing.start({
    path: 'trace.json',
    screenshots: true
});
await page.goto('https://www.trip.com');
await page.tracing.stop();
await browser.close();

模拟表单提交，以 http://Trip.com 首页为例，需要先注册账号并替换，祝你好运不要遇上验证码

const browser = await puppeteer.launch({
  headless: false
});
const page = await browser.newPage();
await page.goto('https://www.trip.com/account/signin?');
await page.waitForSelector('#userName');
await page.focus('#userName');
await page.waitFor(500);
await page.type('#userName', 'your account', {delay: 100});
await page.focus('#txtPassword');
await page.waitFor(500);
await page.type('#txtPassword', 'your password', {delay: 100});
await page.waitFor(500);
await page.click('#btnSubmitData')

爬取豆瓣电影的搜索列表，Document 里返回的是加密的数据 ​window.DATA​，套路是在前端JS解密

const search_text = '漫威';
const size = 15; // 每页搜索结果数
let start = 0; // 起始pageconst 
browser = await puppeteer.launch({
  headless: false
});
const page = await browser.newPage();
const crawlMovies = async () => {
  await page.goto(`https://movie.douban.com/subject_search?search_text=${encodeURIComponent(search_text)}&start=${start * size}`, {waitUntil: 'domcontentloaded'})
  console.log(`crawling page ${start + 1}...`);
  // page.evaluate 里的 currentStart 参数需要传进去，不能直接使用外部参数
  let result = await page.evaluate((currentStart) => {
    // 获取该页所有电影标题
    let list = Array.from(document.querySelectorAll('.detail')).map((item) => {
      return item.querySelector('.title a').innerHTML;
    });
    // 判断是否是最后一页，作为递归退出的条件
    let maxStart = Math.max.apply(null, Array.from(document.querySelectorAll('.paginator a')).map((item) => {
      let startNum = 0;
      try {
        startNum = item.getAttribute('href').match(/\d+$/)[0];
      } catch (e) {
      }
      return startNum;
    }))
    return {
      list: list,
      isEnd: currentStart > maxStart
    }
  }, start * size);
  if (result.isEnd) {
    return result.list;
  }
  start += 1;
  return result.list.concat((await crawlMovies()))
}
const movieList = await crawlMovies();
console.log(JSON.stringify(movieList, null, 2))

简而言之

Puppeteer 是一个无头浏览器，可以更方便的做一些其他无头浏览器能做事情，以上例子简单的介绍了他的基本用法，详细的 API 在官方文档里也有，就简单介绍到此

参考链接

文档地址

实用工具，在线操作puppeteer，直观看效果。