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

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

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

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

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

利用 Rize 来进行 UI 测试或 E2E 测试的更多相关文章

  1. e2e测试框架之Cypress

    谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...

  2. UT, FT ,E2E 测试的意思

    前端实现自动化就要借助到unit和e2e端到端测试了 一.unit测试(FT 就是Fucntion Test 功能测试,  注意不是: funciton函数 ...fucntion功能   不一样哦  ...

  3. e2e 测试（1）

    距离上一随笔,已经有一个月没有没写.到今天,刚刚好好,是学习e2e测试的一个月.今天有点时间可以总结一下这个月来的收获. 1.搭建e2e的测试环境 我是使用 Vue 构建项目,所以我也是通过Vue-c ...

  4. angularjs e2e测试初步学习（一）

    e2e测试是从用户角度出发,认为整个系统都是一个黑盒,只有UI暴露出来. angularjs的测试框架是采用protractor. 1.创建文件 首先创建一个项目文件夹test,然后再创建两个文件,一 ...

  5. Webpack单元测试，e2e测试

    此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...

  6. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  7. UI测试和GUI测试的区别

    UI 测试 包含GUI测试和command line 测试 分享连接 https://www.ranorex.com/resources/testing-wiki/gui-testing/

  8. E2E测试框架

    1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 41427 nightma ...

  9. e2e 测试 出现的错误

    每次开始学习vue的新知识时,总在环境这一块出现很多坑.这次我来记录一下,我在搭建vue e2e测试框架是踏过的坑吧. 我们都只知道,使用vue init webpack 项目名字<项目名字不能 ...

随机推荐

  1. SLAM——视觉里程计（一）feature

    从现在开始下面两篇文章来介绍SLAM中的视觉里程计(Visual Odometry).这个是我们正式进入SLAM工程的第一步,而之前介绍的更多的是一些基础理论.视觉里程计完成的事情是视觉里程计VO的目 ...

  2. 吴裕雄--天生自然python学习笔记：python 用firebase实现英汉词典进阶版

    用 post 方法创建的数据会自动产生一个 id (Key ),但有时也常常为了取得这个 id 而让程序难以处理 . 以英汉词典标准版来说,它的数据结构如下: 如果将每条数据都改为{eword:cwo ...

  3. replace|同时替换

    a= 'eeekkksksksk' print a.replace('e','s').replace('s','k') #kkkkkkkkkkkk change={"e":&quo ...

  4. 02-Java开发环境的配置

    在本章节中我们将为大家介绍如何搭建Java开发环境. Windows 上安装开发环境 window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www ...

  5. jQuery性能优化与技巧

    1.使用最新版本的jQuery类库 jQuery的每一个新的版本都会较上一版进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能,需要注意的是在更换版本之后,要 ...

  6. 调用其他VBA工程中的过程和函数以及API函数

    Excel VBA中,同一个应用程序下面包括多个工作簿,每个工作簿都有自己独立的VBAProject 在同一个VBA工程中,使用Call即可调用其他模块中的过程和函数,例如: Call Module2 ...

  7. Yii框架的学习指南（策码秀才篇）1-3 我是这么学习的yii framework （不间断更新中）

    Ⅰ.基本概念一.入口文件入口文件内容:一般格式如下:<?php $yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置$confi ...

  8. 基于Python的Flask基础知识

    Flask简介 Flask 是一个使用 Python 编写的轻量级 Web 应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask. 下面我们简单 ...

  9. django的orm介绍以及静态文件介绍

    1 django中app的概念 大学:----------------- 项目 信息学院 ----------app01 物理学院-----------app02*强调:创建了app,要在配置文件中注 ...

  10. openpyxl传入表名时不要使用默认的sheet表名

    openpyxl传入表名时不要使用默认的sheet表名,会报错 处理:改一下表名即可