Puppeteer（一个Node.js库，用于控制无头Chrome）

本文概述

什么是Puppeteer
安装Puppeteer
要求
使用Puppeteer运行脚本
使用开发人员工具
贡献给Puppeteer

上一次, 出现了许多基于Chromium的无头浏览器, 例如Chromeless, Chrominator, Navalia, Lambdium等, 这使得选择哪种浏览器测试框架变得困难。因此, 今天我们要与你分享使用Node.js选择的最出色的浏览器测试框架之一, 我们谈论的是由Google Chrome开发者工具团队领导的项目Puppeteer。
什么是Puppeteer 基本上, Puppeteer是一个Node库, 它提供了高级API来通过DevTools协议控制无头Chrome。也可以将其配置为使用完整的Chrome。你可以使用Puppeteer及其API在浏览器中手动完成的大多数操作, 例如：

生成页面的屏幕截图和PDF。
抓取SPA并生成预渲染的内容(即” SSR” )。
抓取网站内容。
自动执行表单提交, UI测试, 键盘输入等。
创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能, 直接在最新版本的Chrome中运行测试。
捕获站点的时间线跟踪以帮助诊断性能问题。

安装Puppeteer 当你使用NPM或Yarn之类的程序包管理器安装Puppeteer时, 它会下载Chromium的最新版本(在Mac上约为71Mb, 在Linux上约为90Mb, 在Windows上约为110Mb), 保证可以使用该API。这意味着, 与其他浏览器测试框架不同, 你将不必担心维护自己的chrome / chromium实例并使用命令行启动无头服务器。
如前所述, 你可以使用NPM或Yarn和Node.js安装Puppeteer。只需在终端中运行以下任何命令：

REM If you use NPM: npm i puppeteerREM Or with yarn yarn add puppeteer

安装完成后, 你将可以通过在某些JS文件中需要puppeteer模块来控制无头浏览器。有关库及其源代码的更多信息, 请不要忘记在此处访问Github上的官方存储库。
要求最初, Puppeteer需要Node.js 7.x才能正常工作, 因为它在源代码中使用了await关键字, 这使得异步代码更易于阅读和理解。但是, 为了提供与旧版Node.js(和LTS)版本的向后兼容性, puppeteer现在可以与Node.js版本6.x(自v0.10.0版本开始)一起使用, 这意味着你可以将其与节点的LTS版本一起使用。已安装：

REM Needs to output at least version 6 node -v

使用puppeteer, 你将能够创建屏幕截图, 生成PDF, 自动化测试以及许多其他任务。
使用Puppeteer运行脚本要使用puppeteer执行某些任务, 你只需要基本的Node.js知识。在你的项目中安装puppeteer模块, 创建一个脚本文件script.js并在其中编写使用puppeteer的代码, 在这种情况下, 我们将使用以下代码创建我们的代码世界的屏幕截图(将代码复制并粘贴到内部script.js文件)：

// Require puppeteer const puppeteer = require('puppeteer'); (async () => { // Create an instance of the chrome browser const browser = await puppeteer.launch(); // Create a new page const page = await browser.newPage(); // Set some dimensions to the screen page.setViewport({ width: 1920, height: 1080 }); // Navigate to Our Code World await page.goto('http://ourcodeworld.com'); // Create a screenshot of Our Code World website await page.screenshot({ path: 'screenshot.png' }); // Close Browser browser.close(); })();

最后, 只需使用以下命令通过Node运行脚本：

node script.js

你只需要等到任务完成, 即可在script.js文件的同一目录中找到” 我们的代码世界” 的屏幕截图。
使用开发人员工具 Puppeteer上最令人敬畏的事情是, 可以在使用Chrome的同时使用Chrome开发者工具！只是不要忘记在初始化脚本中禁用无头浏览器模式：

// Require puppeteer const puppeteer = require('puppeteer'); (async () => { // Create an instance of the chrome browser // But disable headless mode ! const browser = await puppeteer.launch({ headless: false }); // Create a new page const page = await browser.newPage(); // Set some dimensions to the screen page.setViewport({ width: 1920, height: 1080 }); // Navigate to Our Code World await page.goto('http://ourcodeworld.com'); // Create a screenshot of Our Code World website await page.screenshot({ path: 'screenshot.png' }); // Don't close via script but manually // closing the chromium window ! // browser.close(); })();

该脚本将启动铬过程, 你将能够像往常一样使用开发人员工具, 太棒了吧？

文章图片
贡献给Puppeteer 【Puppeteer（一个Node.js库，用于控制无头Chrome）】Puppeteer是一个开源项目, 因此, 在Github官方存储库中欢迎问题报告, 代码贡献。 Chrome DevTools团队维护该库, 但是, 如果你可以提供帮助, 则可以自由地进行操作, 因此请不要忘记在此处查看项目的贡献准则。