利用 Rize 来进行 UI 测试或 E2E 测试
之前我曾經(jīng)在《Rize - 一個(gè)可以讓你簡(jiǎn)單、優(yōu)雅地使用 puppeteer 的 Node.js 庫(kù)》一文簡(jiǎn)單介紹過 Rize 這個(gè)庫(kù)。當(dāng)時(shí)僅僅是介紹這個(gè)庫(kù)本身，關(guān)于如何使用，我沒有給太多的指導(dǎo)。
這篇文章講的是如何使用 Rize 來做 UI 測(cè)試或 E2E 測(cè)試。
在正式開始之前，先給可能沒了解過 Rize 的同學(xué)做個(gè)簡(jiǎn)單的介紹：Rize 是一個(gè)提供了相對(duì)頂層并且可鏈?zhǔn)秸{(diào)用的 API 的庫(kù)，可與 puppeteer 一起使用。目前開源在 GitHub，地址是 github.com/g-plane/riz…，歡迎大家前往 GitHub 給個(gè) star。
安裝
首先是安裝 Rize 和 puppeteer。
如果您使用 Yarn：
yarn add --dev rize puppeteer 復(fù)制代碼如果您使用 npm：
npm install --save-dev rize puppeteer 復(fù)制代碼考慮到國(guó)內(nèi)的網(wǎng)絡(luò)原因，您可能需要使用國(guó)內(nèi)的 Chromium 鏡像：
對(duì)于 Linux 或 macOS 用戶：
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize 復(fù)制代碼Windows 用戶：
SET PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize 復(fù)制代碼（npm 用戶同理）
由于安裝 puppeteer 的時(shí)候會(huì)下載 Chromium，所以整個(gè)過程可能比較費(fèi)時(shí)，需要耐心等待。
約定
我們假定要被測(cè)試的頁面是這樣的：
<html><head><title>標(biāo)題</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> 復(fù)制代碼開始編寫測(cè)試
首先是導(dǎo)入。我們推薦使用 ES2015 的 import 語法：
import Rize from 'rize' 復(fù)制代碼當(dāng)然您也可以用 CommonJS 方式：
const Rize = require('rize') 復(fù)制代碼第一件事是構(gòu)造一個(gè) Rize 實(shí)例：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()}) }) 復(fù)制代碼然后要轉(zhuǎn)到要被測(cè)試的頁面。我們假定前面設(shè)定的頁面運(yùn)行在 http://localhost:8000/ 上，那么我們可以：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/')}) }) 復(fù)制代碼斷言
斷言頁面標(biāo)題
我們可以使用 assertTitle 方法來斷言當(dāng)前頁面的標(biāo)題：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題')}) }) 復(fù)制代碼斷言文本內(nèi)容
可以使用 assertTitle 方法來斷言當(dāng)前頁面存在指定的文本：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!')}) }) 復(fù)制代碼我們還可以明確在某個(gè)元素中存在指定文本，只需給出該元素的 CSS 選擇器即可：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!')}) }) 復(fù)制代碼斷言是否存在指定的類名
我們可以斷言某個(gè)元素存在指定的類名：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting')}) }) 復(fù)制代碼還可以斷言不存在指定的類名：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet')}) }) 復(fù)制代碼斷言表單狀態(tài)
我們可以斷言一些表單控件的狀態(tài)，例如復(fù)選框（checkbox）選中或未選中：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]') // 斷言已選中.assertNotChecked('[name="cb2"]') // 斷言未選中}) }) 復(fù)制代碼與頁面交互
在實(shí)際測(cè)試的過程中，我們不僅僅需要進(jìn)行一些斷言，還需要與頁面進(jìn)行交互。
例如，我們以上面的頁面為例，我們可以單擊那個(gè)按鈕：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]') // 斷言已選中.assertNotChecked('[name="cb2"]') // 斷言未選中.click('#btn')}) }) 復(fù)制代碼也可以單擊某個(gè)鏈接，我們只需要給出該鏈接上的文本：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').assertSee('Hello World!').assertSeeIn('.greeting', 'Hello World!').assertClassHas('div', 'greeting').assertClassMissing('div', 'greet').assertChecked('[name="cb1"]') // 斷言已選中.assertNotChecked('[name="cb2"]') // 斷言未選中.click('#btn').clickLink('Another Page')}) }) 復(fù)制代碼當(dāng)然，我們還能與表單進(jìn)行交互。例如，勾選某個(gè)復(fù)選框：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').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"]')}) }) 復(fù)制代碼或者取消勾選某個(gè)復(fù)選框：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').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"]')}) }) 復(fù)制代碼關(guān)閉瀏覽器
在完成所有工作之后，需要退出瀏覽器：
describe('UI test', () => {it('example test', async () => {const rize = new Rize()rize.goto('http://localhost:8000/').assertTitle('標(biāo)題').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()}) }) 復(fù)制代碼更多
實(shí)際上 Rize 的功能遠(yuǎn)不只上面那些。想要獲取更多信息，可以前往以下頁面：
Rize 的 GitHub 倉(cāng)庫(kù)：github.com/g-plane/riz… （歡迎 star）
Rize 的文檔教程：rize.js.org/
Rize 所有的 API 參考：https://rize.js.org/api/classes/index.rize.html
總結(jié)
以上是生活随笔為你收集整理的利用 Rize 来进行 UI 测试或 E2E 测试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用ajax方法实现form表单的提交
- 下一篇： PowerMockito使用详解