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 puppeteer

REM 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是一个开源项目, 因此, 在Github官方存储库中欢迎问题报告, 代码贡献。 Chrome DevTools团队维护该库, 但是, 如果你可以提供帮助, 则可以自由地进行操作, 因此请不要忘记在此处查看项目的贡献准则。