Puppeteer入门初探

本文来自网易云社区

做者：唐钊

最近在看 node 爬虫相关的一些东西，我记得仍是好久之前经常使用的 node 爬虫工具仍是 superagengt+cherrio,他们的思路是经过发起 http 请求而后截取 respone 的内容，可是随着前端mvvm等框架的盛行，如今更多的内容是异步加载了，因此经过这种传统的爬虫方式已经很难抓取到咱们想要的内容了，那么Puppeteer又有什么亮点呢？接下来咱们详细介绍一下这个由 google 官方团队维护的大杀器！

Puppeteer是一个Node库，由Chrome官方团队进行维护，提供接口来控制headless Chrome。Headless Chrome是一种不使用Chrome来运行Chrome浏览器的方式。简单的来讲就是一个运行在命令行中的 chrome,咱们能够经过代码来实现咱们常规的浏览器浏览网页的功能。这样就能保证咱们拿到的内容和正常经过浏览器查看的是一毛同样的！

Puppeteer 核心功能

• 利用网页生成PDF、图片

• 爬取SPA应用，并生成预渲染内容（即“SSR” 服务端渲染）

• 能够从网站抓取内容

• 自动化表单提交、UI测试、键盘输入等

• 帮你建立一个最新的自动化测试环境（chrome），能够直接在此运行测试用例

• 捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

接下来咱们经过一些简单的示例来看一下它的使用

安装

安装仍是常规的流程，经过yarn或npm来完成。只需运行下面的命令：

yarn add pupeeter//ornpm i -S puppeteer

DEMO

demo-截屏

const puppeteer = require("puppeteer");   //引入 puppeteer(async() => {    /*经过 launch 生成一个’浏览器‘实例,
    option 中的 headless 是个布尔值，若是是 false 的话你就会看到一个浏览器从打开，到完成你整个任务的全过程，
    默认是 true，也就是在后台自动完成你的任务
    */
    const browser = await puppeteer.launch({ headless: false });  
    //打开一个新的标签页
    const page = await browser.newPage();    //跳转到咱们想要的地址去
    await page.goto("http://www.hockor.com/");    //默认打开的视口大小是800X600 ,咱们能够经过以下代码来设置窗口的大小，
    await page.setViewport({
        width:1920,
        height:1080
    })    //经过screenshot方法完成截屏，而且保存在指定的 path 中
    await page.screenshot({ path: "nba.png" });    //最后关闭整个‘浏览器‘
    browser.close();
})();

过程以下：

demo-经过搜索引擎拉取图片

上面咱们展现了 puppeteer一个基础的 demo 完整实例，可是它更强大的地方还有不少，不只支持在网页上点击，还能够填写表单，读取数据。你们能够去官方 api 查看，传送连接

接下来开始咱们下一个 demo，这个示例咱们完成一个在搜索引擎中爬取咱们想要的图片并保存到本地的功能。来更进一步的了解这个强大的工具。

• 咱们的任务是在搜狗图片中爬取关键词为“NBA”的图片，而且保存在咱们当前的 imgs 目录下。

那么核心的关键点就在于输入咱们的关键词而且跳转到对应的列表页面，而后爬取内容中全部的 img 标签，并将其保存在咱们制定的目录中。接下来咱们详细剖析。

经过查看Puppeteer API，能够找到定义点击的函数和聚焦的函数：

page.click(selector[, options])
page.focus(selector);

以上selector 一个选择器来指定要点击的元素。若是多个元素知足，那么默认选择第一个。 这不正好知足了咱们前面的逻辑，输入框聚焦和点击，那么怎么输入关键词呢？

For finer control, you can use keyboard.down, 
keyboard.up, and keyboard.sendCharacter to manually 
fire events as if they were generated from a real keyboard.

能够看到咱们能够经过 page.keyboard.sendCharacter 来输入咱们本身的文字

正好，这样子咱们就知足了咱们前期的条件，那么完整的代码以下

const puppeteer = require("puppeteer");
(async ()=>{    const brower = await puppeteer.launch();    const page = await brower.newPage();
    await page.goto("http://pic.sogou.com/");
    await page.setViewport({
        width:1920,
        height:1080
    })    //上面的代码和以前是同样的，不一样是下面几句
    //
    await page.focus("#form_querytext");
    await page.keyboard.sendCharacter("nba");
    await page.click("#searchBtn")

    await page.waitFor(1000);    //监听页面 load 完成
    page.on('load',async ()=>{        console.log("page loaded");        const srcs = await page.evaluate(()=> {            const images = document.querySelectorAll("img.img-hover");            return Array.prototype.map.call(images,img=>img.src)
        })        //遍历图片而且保存
        srcs.forEach(async (src)=> {            console.log(src)            const ext = path.extname(src) ? path.extname(src):".jpg";            const file = path.join('./imgs',`${Date.now()}${ext}`)
            http.get(src,res=>{
                res.pipe(fs.createWriteStream(file)).on('finish',(err)=>{                    if(err){                        console.log(err)
                    } else {                        console.log("done")
                    }
                })
            })
        })
        await brower.close()
    })
})()

咱们能够看到上面的流程就像咱们正常浏览网页同样，而不是之前那种在 http response 中去抓取内容，这样子对于如今的不少懒加载页面或者前端渲染来说咱们都能成功的爬取到咱们想要的内容。

更多的官方 demo 例子咱们能够去https://try-puppeteer.appspot.com/编辑查看。

目前 puppeteer在爬虫和前端自动化测试上使用也日益增大，你们能够去官方 API 文档查看它的更多功能！你们也能够结合本身的需求／业务场景，充分挖掘Puppeteer功能。

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易研发、产品、运营经验分享请访问网易云社区

相关文章：
【推荐】 分布式存储系统可靠性系列一：如何估算
【推荐】 经常使用数据清洗方法大盘点
【推荐】 【你离硅谷只差一步】网易中国创业家大赛项目火热征集中