Puppeteer是什么？
Puppeteer是 GoogleChrome出品的一个 Node 库无头浏览器，提供高级 API，通过 DevTools Protocol 来控制 Chrome 或Chromium。 Puppeteer 默认运行为 headless，但是可以配置为运行为 non-headless。
上游服务生产大量的文章爬虫数据，下游 Puppeteer 服务需要处理这些数据，转换成格式化的标准文章。之所以使用 Puppeteer 服务来产生标准化文章是因为只有浏览器才能比较精准的解析 css，而我们需要提取出关键的样式再赋予标准化的格式，比如加粗，加斜，或者居中，大小号字体等。任务处理比较多，QPS 需要达到 50-200。
什么是无头浏览器
无头浏览器就是没有用户界面的浏览器，即通过写脚本来使用无头浏览器访问网站，还可以做一些点击等行为。
Puppeteer 一般使用无头的模式运行，这样的开销较小。当然也提供了使用完整的 Chromium/Chrome 来运行的模式。
Puppeteer 能做什么
能够做几乎所有浏览器能做的事情。
- 网页截图，或生成 pdf
- 爬取 SPA 或 SSR 网站
- 自动化表单提交，UI 测试，键盘输入等
- 创建一个最新的自动化测试环境。使用最新的 js 和最新的 Chrome 浏览器运行测试用例
- 捕获网站的时间线，帮助诊断性能问题
- 测试 Chrome 插件
Puppeteer 与其他无头浏览器有什么区别？
- Puppeteer 由Google Chrome维护，速度快、安全、稳定、易用
- 其他无头浏览器可以支持多种浏览器环境（Safari, Chrome, Firefox 等），而 Puppeteer 只支持 Chromium/Chrome
- Puppeteer 有完善的事件系统，不需要频繁的 sleep(1000) 了
- Puppeteer 的调试功能很强大，还支持在 DevTools 里面调试
- Puppeteer 能够创建一个「真实」的行为，如点击
Puppeteer API
Puppeteer 的大部分 API 的返回值都是 Promise，故推荐使用 async await 来处理异步操作。Puppeteer 的 API 包含以下类：
类名描述 Puppeteer 主要用于创建一个浏览器实例，也可以用来下载新的 Chromium，或者设置浏览器的默认参数 BrowserFetcher 用于下载和管理 ChromiumBrowser 可以创建一个或多个 PageBrowserContext 创建一个隐身模式的浏览器时需要用到 Page 主要 API，用于操作一个页面，后面会详细介绍 Worker 用于处理 WebWorkerKeyboard 可以触发键盘按键 Mouse 可以触发鼠标动作 TouchScreen 可以触发触摸屏的动作 Tracing 用于分析性能 Dialog 存在于 page 的 dialog 事件回调中，表示调用弹窗后的对象，包括 alert, beforeunload, confirm 和 promptConsoleMessage 存在于 page 的 console 事件回调中，表示调用 console.log 等方法后的对象 Frame 常用于处理包含多个 frame 的页面。page 中的很多方法就是直接调用的主 frame 的方法 ExecutionContext 执行上下文存在于 frame、浏览器插件、worker 中。可以用来直接执行一段 jsJSHandle 通过 page.evaluateHandle 生成，用于将页面中的 handler 挑出来传递使用 ElementHandle 通过 page.$ 生成，用于将页面中某个元素的 handler 挑出来传递使用 Request 在 page.setRequestInterception 方法中使用，可以处理页面的请求 Response 表示页面接收到的响应 SecurityDetails 表示页面的安全信息 Target 可以是 page, background_page, service_worker, browser 等 CDPSession 用于直接和 Devtools 通信 Coverage 用于分析 js 和 css 的代码被页面使用的比例 TimeoutError 超时错误 Page
Page 是 Puppeteer 中最重要的一个 API，也是它的核心所在，这里会介绍一些常用的 Page API。
设置页面环境方法名描述 page.emulate 设置 viewport 和 uapage.setViewport 设置 viewportpage.setUserAgent 设置 uapage.setRequestInterception 中断所有请求，并可以修改请求的返回值 page.addScriptTag 添加 js 脚本 page.addStyleTag 添加 csspage.setContent 设置整个 htmlpage.setCacheEnabled 设置缓存是否开启 page.setExtraHTTPHeaders 设置额外的 http 头 page.setGeolocation 设置地理位置 page.setJavaScriptEnabled 设置 js 是否开启 page.setOfflineMode 设置离线模式 page.deleteCookie 删除 cookiespage.setCookie 设置 cookies 模拟动作
一般会先滚动视窗到相应元素那，再执行动作。
方法名描述 page.click 点击 page.tap 手指点击 page.focus 聚焦 page.hoverhoverpage.type 在指定元素中输入内容 page.select 选中 <select> 的某个选项等待方法名描述 page.waitFor 等待某个元素渲染出来，或者某个函数执行之后返回 true，或者直接等待指定的时间 page.waitForSelector 等待某个元素被渲染 page.waitForFunction 等待某个函数执行之后返回 truepage.waitForNavigation 等待页面跳转 page.waitForRequest 等待某个特定的请求被发出 page.waitForResponse 等待某个特定的请求收到了回应执行脚本方法名描述 page.$使用 document.querySelector 获取结果，会返回 ElementHandle，可以传递使用 page.$$同上，不过使用的是 document.querySelectorAllpage.$eval 将 document.querySelector 获取的结果传递给 pageFunctionpage.$$eval 同上，不过使用的是 document.querySelectorAllpage.evaluate 直接执行脚本 page.evaluateHandle 执行脚本，返回的是 JSHandle，可以传递使用 page.evaluateOnNewDocument 在下个 frame 执行脚本 page.exposeFunction 将函数注入到 window 对象上 page.queryObjects 获取所有属于这个类的对象，可以传递使用页面跳转方法名描述 page.goto 跳转页面 page.close 关闭 page.goBack 后退 page.goForward 前进 page.reload 刷新 page.setDefaultNavigationTimeout 设置页面跳转的超时时长获取内容方法名描述 page.screenshot 截屏 page.pdf 生成 pdfpage.content 获取整个页面内容 page.title 获取页面 titlepage.url 获取页面 urlpage.viewport 获取页面 viewportpage.cookies 获取 cookies 事件事件名描述 page.on(‘console’)监听 console.log 等的调用 page.on(‘dialog’)监听页面的 alert, beforeunload, confirm 和 prompt 弹窗 page.on(‘load’)监听页面的加载 page.on(‘domcontentloaded’)监听页面 dom 加载完成 page.on(‘pageerror’)监听页面错误 page.on(‘request’)监听页面发送的请求 page.on(‘requestfailed’)监听失败的请求 page.on(‘requestfinished’)监听完成的请求 page.on(‘response’)监听页面接受到的响应命名空间
通过一些命名空间可以快速访问到该页面下的其他实例。
属性名描述 page.keyboard 访问到页面的 Keyboard 对象 page.mouse 访问到页面的 Mouse 对象 page.touchscreen 访问到页面的 TouchScreen 对象。
