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

时间 2019-11-17

标签利用 rize 进行测试 e2e 繁體版

原文原文链接

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

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

在正式开始以前，先给可能没了解过 Rize 的同窗作个简单的介绍：Rize 是一个提供了相对顶层而且可链式调用的 API 的库，可与 puppeteer 一块儿使用。目前开源在 GitHub，地址是 github.com/g-plane/riz…，欢迎你们前往 GitHub 给个 star。java

安装

首先是安装 Rize 和 puppeteer。git

若是您使用 Yarn：github

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

若是您使用 npm：shell

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

考虑到国内的网络缘由，您可能须要使用国内的 Chromium 镜像：npm

对于 Linux 或 macOS 用户：api

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 用户同理）bash

因为安装 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