主要内容

Puppeteer 简介
快速入门
结合 Cucumber 做 UI 自动化

很多人听说过用 Selenium/WebDriver 做 Web 自动化，今天我们介绍一种比 Selenium/WebDriver 运行更快速的 Web 自动化方式，Puppeteer。

Puppeteer 简介

Puppeteer 是 NPM 库，它提供了 NodeJS 高级 API 来控制 Chrome。Puppeteer 默认以无头（无界面）方式运行，但也可以配置为运行有界面的 Chrome。

使用 Puppteer 可以自动化在浏览器中手动执行的大多数事情。比如：

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

快速入门

安装

要在项目中使用 Puppeteer，请运行：

$ npm i puppeteer

或者

$ yarn add puppeteer

备注：由于安装时会下载 Chromium，默认使用国外服务器下载，速度会比较慢。在下载之前可以配置使用 taobao 镜像地址下载。

$ npm config set puppeteer_download_host=https://npm.taobao.org/mirrors

### 用法
与其他浏览器测试框架原理一样。首先调用 Puppeteer 的 API 创建一个 Browser 实例并打开页面，然后使用 Puppeteer 的 API 对它们进行操作。

示例 - 导航到https://example.comexample.png：并将截屏保存为

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

将文件保存到为 example.js 并调用"node example.js" 命令执行它。

Puppeteer 默认将初始页面大小设置为 800px * 600px，它定义了屏幕截图大小。页面大小可以通过 Page.setViewport() 自定义。

Puppeteer 更多 API，请参考：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

结合 Cucumber 框架做 UI 自动化

Cucumber 用自然语言结合 JavaScript 编写的自动化测试脚本。因为它们是用自然语言编写的，所以你团队中的任何人都可以阅读它们，而且可以用它们来帮助改善团队之间的沟通、协作和信任。

更多关于 Cucumber 的介绍，可以参考之前的文章。

场景

我们用 http://todomvc.com/examples/react/#/ 网站作为被测应用示例：

这是一个用来记录待做事项的页面。

在文本输入框中输入文本 hello world，按下 enter 键，将会创建一个新的 todo。

以上可以做我们这次 demo 的场景，下面带大家一步一步操作来实现操作。

创建项目

你可以手动创建项目基本的目录，或者直接使用 CukeTest 创建一个 basic 项目模版。它生成如下典型的 Cucumber 项目文件结构。

|____features
| |____page.feature
| |____step_definitions
| | |____definitions1.js
|____package.json

创建场景

编辑 feature 文件，写下我们的操作步骤：

# language: zh-CN
功能: TODO 应用添加应用测试
  作为用户，我可以在http://todomvc.com/examples/react/#/
  创建一些todo 列表

  场景: 添加一项新的TODO
    假如我今天必须完成一些新的TODO"打扫房间"
    当我把这些TODO输入到输入框中
    而且我按下Enter键
    那么我期望这些TODO在我的TODO列表中

你可以使用在 CukeTest 的文本界面中粘贴上面的 feature 文本，然后可以切换到可视化界面，方便可视化操作，如生成代码、拖拽等。

生成自动化代码样例

打开 definitions1.js 文件，在 CukeTest 中可视化界面中点击每个操作步骤后面的灰色按钮，即可快速生成自动化代码样例。如下图，逐个点击每个步骤上的按钮会生成 JavaScript 的代码框架：

完全生成的代码框架如下：
step_definitons/definitions1.js

var { Given, When, Then } = require('cucumber')

Given("我今天必须完成一些新的TODO{string}", async function (arg1) {
    return 'pending';
});

When("我把这些TODO输入到输入框中", async function () {
    return 'pending';
});

When("我按下Enter键", async function () {
    return 'pending';
});

Then("我期望这些TODO在我的TODO列表中", async function () {
    return 'pending';
});

上面每个步骤定义函数的第一个参数用来匹配步骤文本，并提取参数，第二个函数参数是步骤定义的实现。

实现了这些步骤，就完成了自动化脚本。

实现代码

我们知道，Web 自动化有个 Page Object 模式，就是把页面相关的操作封装在一个类中，便于调用。我们在这里封装了一个 Cucumber World 对象，包含了 Page 相关的操作。World 对象是 Cucumber 的概念，一个场景执行的时候会自动生成一个 World 对象。详细定义可以参考 World 定义（http://cuketest.com/zh-cn/cucumber/concepts.html#world）。

创建 world.js，使用 Puppeteer 相关 API 实现场景定义中的操作，将操作代码封装到 class 中。

step_definitions/world.js

const { setWorldConstructor } = require("cucumber");
const { expect } = require("chai");
const puppeteer = require("puppeteer");

const PAGE = "http://todomvc.com/examples/react/#/";

class TodoWorld {
    constructor({attach, parameters}) {
        this.todo = "";
        this.attach = attach;
        this.parameters = parameters;
    }

    async openTodoPage() {
        this.browser = await puppeteer.launch();
        this.page = await this.browser.newPage();
        await this.page.goto(PAGE);
    }

    setTodo(todo) {
        this.todo = todo;
    }

    async writeTodo() {
        const inputSelector = "section input";
        await this.page.waitForSelector(inputSelector);
        this.inputElement = await this.page.$(inputSelector);
        await this.inputElement.type(this.todo);
    }

    async submit() {
        await this.inputElement.press("Enter");
    }

    async checkTodoIsInList() {
        const todoSelector = "ul.todo-list li label";
        await this.page.waitForSelector(todoSelector);
        const todo = await this.page.evaluate(
            todoSelector => document.querySelector(todoSelector).innerText,
            todoSelector
        );
        expect(this.todo).to.eql(todo);
    }

    async takeScreen(){
        return await this.page.screenshot({ encoding:'base64' });        
    }

    async closeTodoPage() {
        await this.browser.close();
    }
}

setWorldConstructor(TodoWorld);

其中，Cucumber 中自定义的 World 对象要通过 setWorldConstructor 设置到 Cucumber 中，才会在执行的过程中被创建。

有了 World 对象，我们在步骤定义的框架中实现步骤就简便多了，只需要通过"this.” 的方式调用 world 对象，访问这个对象的方法。

下面是步骤定义实现后的代码：
step_definitons/definitions1.js

const { Given, When, Then,Before,After } = require("cucumber");

Before(async function () {
    return await this.openTodoPage();
});

After(async function(){
    let png =  await this.takescreen();
    this.attach(png, 'image/png');
    return await this.closeTodoPage();
})

Given("我今天必须完成一些新的TODO{string}", function (todo) {
    this.setTodo(todo);
});

When("我把这些TODO输入到输入框中", async function () {
    return await this.writeTodo();
});

When("我按下Enter键", async function () {
    return await this.submit();
});

Then("我期望这些TODO在我的TODO列表中", async function () {
    return await this.checkTodoIsInList();
});

在 After hook 中，定义了截屏的操作，这个操作会将截屏内容放入报表。因为 After hook 会在每个场景结束的时候被调用，所以每个场景操作后的截屏会放入执行报告中。

运行

在 CukeTest 中运行项目，即可生成自动化报告，并且运行完成后有页面截图：

更多 Cucumber 的相关知识可以访问：
https://github.com/cucumber/cucumber-js

Puppeteer 的开源项目：
https://github.com/GoogleChrome/puppeteer#readme

↙↙↙阅读原文可查看相关链接，并与作者交流