利用 Rize 來進行 UI 測試或 E2E 測試

時間 2019-12-09

標籤利用 rize 進行測試 e2e 简体版

原文原文鏈接

以前我曾經在《Rize - 一個可讓你簡單、優雅地使用 puppeteer 的 Node.js 庫》一文簡單介紹過 Rize 這個庫。當時僅僅是介紹這個庫自己，關於如何使用，我沒有給太多的指導。javascript

這篇文章講的是如何使用 Rize 來作 UI 測試或 E2E 測試。html

在正式開始以前，先給可能沒了解過 Rize 的同窗作個簡單的介紹：Rize 是一個提供了相對頂層而且可鏈式調用的 API 的庫，可與 puppeteer 一塊兒使用。目前開源在 GitHub，地址是 https://github.com/g-plane/rize，歡迎你們前往 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 用戶：segmentfault

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

Windows 用戶：api

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