之前我曾经在《Rize - 一个可以让你简单、优雅地使用 puppeteer 的 Node.js 库》一文简单介绍过 Rize 这个库。当时仅仅是介绍这个库本身，关于如何使用，我没有给太多的指导。

这篇文章讲的是如何使用 Rize 来做 UI 测试或 E2E 测试。

在正式开始之前，先给可能没了解过 Rize 的同学做个简单的介绍：Rize 是一个提供了相对顶层并且可链式调用的 API 的库，可与 puppeteer 一起使用。目前开源在 GitHub，地址是 github.com/g-plane/riz…，欢迎大家前往 GitHub 给个 star。

安装

首先是安装 Rize 和 puppeteer。

如果您使用 Yarn：

$ yarn add --dev rize puppeteer
复制代码

如果您使用 npm：

$ npm install --save-dev rize puppeteer
复制代码

考虑到国内的网络原因，您可能需要使用国内的 Chromium 镜像：

对于 Linux 或 macOS 用户：

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize
复制代码

Windows 用户：

SET PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize
复制代码

（npm 用户同理）

由于安装 puppeteer 的时候会下载 Chromium，所以整个过程可能比较费时，需要耐心等待。

约定

我们假定要被测试的页面是这样的：

<html><head><title>标题</title></head><body><div class="greeting">Hello World!</div><a href="">Another Page</a><button id="btn">Click Me</button><input type="checkbox" name="cb1" checked /><input type="checkbox" name="cb2" /></body>
</html>
复制代码

开始编写测试

首先是导入。我们推荐使用 ES2015 的 import 语法：

import Rize from 'rize'
复制代码

当然您也可以用 CommonJS 方式：

const Rize = require('rize')
复制代码

第一件事是构造一个 Rize 实例：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()})
})
复制代码

然后要转到要被测试的页面。我们假定前面设定的页面运行在 http://localhost:8000/ 上，那么我们可以：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/')})
})
复制代码

断言

断言页面标题

我们可以使用 assertTitle 方法来断言当前页面的标题：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题')})
})
复制代码

断言文本内容

可以使用 assertTitle 方法来断言当前页面存在指定的文本：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!')})
})
复制代码

我们还可以明确在某个元素中存在指定文本，只需给出该元素的 CSS 选择器即可：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!')})
})
复制代码

断言是否存在指定的类名

我们可以断言某个元素存在指定的类名：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting')})
})
复制代码

还可以断言不存在指定的类名：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet')})
})
复制代码

断言表单状态

我们可以断言一些表单控件的状态，例如复选框（checkbox）选中或未选中：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中})
})
复制代码

与页面交互

在实际测试的过程中，我们不仅仅需要进行一些断言，还需要与页面进行交互。

例如，我们以上面的页面为例，我们可以单击那个按钮：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中.click('#btn')})
})
复制代码

也可以单击某个链接，我们只需要给出该链接上的文本：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中.click('#btn').clickLink('Another Page')})
})
复制代码

当然，我们还能与表单进行交互。例如，勾选某个复选框：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中.click('#btn').clickLink('Another Page').check('[name="cb2"]')})
})
复制代码

或者取消勾选某个复选框：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中.click('#btn').clickLink('Another Page').check('[name="cb2"]').uncheck('[name="cb1"]')})
})
复制代码

关闭浏览器

在完成所有工作之后，需要退出浏览器：

describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('标题').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]')     // 断言已选中.assertNotChecked('[name="cb2"]')  // 断言未选中.click('#btn').clickLink('Another Page').check('[name="cb2"]').uncheck('[name="cb1"]')await rize.end()})
})
复制代码

实际上 Rize 的功能远不只上面那些。想要获取更多信息，可以前往以下页面：

Rize 的 GitHub 仓库：github.com/g-plane/riz… （欢迎 star）

Rize 的文档教程：rize.js.org/

Rize 所有的 API 参考：https://rize.js.org/api/classes/index.rize.html

利用 Rize 来进行 UI 测试或 E2E 测试相关推荐

端到端测试（e2e测试）
端到端测试:end to end测试,又称为e2e测试,可以看做一个自动化的测试脚本,其目的是模拟用户行为,通过自动的访问一个真实浏览器环境下的页面,对于页面上的任意操作,断言浏览器中发生特定的行为.
前端E2E测试略详解（以cypress为例）
上一篇文章很简略的介绍了E2E测试的一些框架,本文从相对更详细的层面进行整理 E2E测试 (by cypress): cypress安装 npm install cypress --save-dev ...
单元测试和E2E测试
单元测试把代码看成一个个组件,对每个组件进行单独测试测试内容主要是组件内每一个函数的返回结果是不是和期望值一样代码覆盖率是指代码中每个函数的每种情况的测试情况 E2E测试把程序当做黑盒子,对于 ...
Vue + nightwatch + Chrome76进行e2e测试的正确配置（一）
2019.08.19 修正文章中的错误除了单元测试之外,前端还有一个额外的测试:e2e测试,也就是端到端测试,用来模拟用户操作.对于Vue来说,推荐的e2e测试框架有nightwatch和cypre ...
vue e2e 测试
1.vue e2e测试概述 e2e 测试端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期. 典型 e2e 测试框架对比名称断言是否跨浏览 ...
自动化测试（二）02——单元测试类工具-Karma、Jasmine、Mocha、Jest、AVA E2E测试类工具-cypress、nightmare、nightwatch、testcafe
自动化测试(二)02--单元测试类工具-Karma.Jasmine.Mocha.Jest.AVA & E2E测试类工具-cypress.nightmare.nightwatch.testcaf ...
e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
本地编译执行 Kubernetes e2e 测试
一.Kubernetes e2e 测试简介 Kubernetes e2e(end-to-end) 测试是单元测试和集成测试的补充,其主要目标是确保 Kubernetes 行为的一致可靠,并在单元和集成 ...
E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用
E2E 测试介绍 E2E E2E(end to end)端到端测试是最直观可以理解的测试类型.在前端应用程序中,端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作. E2E 把整个系 ...

利用 Rize 来进行 UI 测试或 E2E 测试

安装

约定