摘要：約定我們假定要被測(cè)試的頁(yè)面是這樣的標(biāo)題開(kāi)始編寫(xiě)測(cè)試首先是導(dǎo)入。我們推薦使用的語(yǔ)法當(dāng)然您也可以用方式第一件事是構(gòu)造一個(gè)實(shí)例然后要轉(zhuǎn)到要被測(cè)試的頁(yè)面。

之前我曾經(jīng)在《Rize - 一個(gè)可以讓你簡(jiǎn)單、優(yōu)雅地使用 puppeteer 的 Node.js 庫(kù)》一文簡(jiǎn)單介紹過(guò) Rize 這個(gè)庫(kù)。當(dāng)時(shí)僅僅是介紹這個(gè)庫(kù)本身，關(guān)于如何使用，我沒(méi)有給太多的指導(dǎo)。

這篇文章講的是如何使用 Rize 來(lái)做 UI 測(cè)試或 E2E 測(cè)試。

在正式開(kāi)始之前，先給可能沒(méi)了解過(guò) Rize 的同學(xué)做個(gè)簡(jiǎn)單的介紹：Rize 是一個(gè)提供了相對(duì)頂層并且可鏈?zhǔn)秸{(diào)用的 API 的庫(kù)，可與 puppeteer 一起使用。目前開(kāi)源在 GitHub，地址是 https://github.com/g-plane/rize，歡迎大家前往 GitHub 給個(gè) star。

首先是安裝 Rize 和 puppeteer。

如果您使用 Yarn：

$ yarn add --dev rize puppeteer

如果您使用 npm：

$ npm install --save-dev rize puppeteer

考慮到國(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

Windows 用戶：

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

（npm 用戶同理）

由于安裝 puppeteer 的時(shí)候會(huì)下載 Chromium，所以整個(gè)過(guò)程可能比較費(fèi)時(shí)，需要耐心等待。

我們假定要被測(cè)試的頁(yè)面是這樣的：

    
        
    
    
        

            Hello World!
        
        Another Page
        Click Me
        
        
    

首先是導(dǎo)入。我們推薦使用 ES2015 的 import 語(yǔ)法：

import Rize from "rize"

當(dāng)然您也可以用 CommonJS 方式：

const Rize = require("rize")

第一件事是構(gòu)造一個(gè) Rize 實(shí)例：

describe("UI test", () => {
  it("example test", async () => {
    const rize = new Rize()
  })
})

然后要轉(zhuǎn)到要被測(cè)試的頁(yè)面。我們假定前面設(shè)定的頁(yè)面運(yùn)行在 http://localhost:8000/ 上，那么我們可以：

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

我們可以使用 assertTitle 方法來(lái)斷言當(dāng)前頁(yè)面的標(biāo)題：

describe("UI test", () => {
  it("example test", async () => {
    const rize = new Rize()
    rize
      .goto("http://localhost:8000/")
      .assertTitle("標(biāo)題")
   })
})

可以使用 assertTitle 方法來(lái)斷言當(dāng)前頁(yè)面存在指定的文本：

describe("UI test", () => {
  it("example test", async () => {
    const rize = new Rize()
    rize
      .goto("http://localhost:8000/")
      .assertTitle("標(biāo)題")
      .assertSee("Hello World!")
   })
})

我們還可以明確在某個(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!")
   })
})

我們可以斷言某個(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")
   })
})

還可以斷言不存在指定的類名：

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")
   })
})

我們可以斷言一些表單控件的狀態(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"]")  // 斷言未選中
   })
})

在實(shí)際測(cè)試的過(guò)程中，我們不僅僅需要進(jìn)行一些斷言，還需要與頁(yè)面進(jìn)行交互。

例如，我們以上面的頁(yè)面為例，我們可以單擊那個(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")
   })
})

也可以單擊某個(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")
   })
})

當(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"]")
   })
})

或者取消勾選某個(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"]")
   })
})

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

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()
   })
})

實(shí)際上 Rize 的功能遠(yuǎn)不只上面那些。想要獲取更多信息，可以前往以下頁(yè)面：

Rize 的 GitHub 倉(cāng)庫(kù)：https://github.com/g-plane/rize （歡迎 star）

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

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