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

Coding01 發布于2019-08-22 15:27 / 750人閱讀

摘要：約定我們假定要被測試的頁面是這樣的標題開始編寫測試首先是導入。我們推薦使用的語法當然您也可以用方式第一件事是構造一個實例然后要轉到要被測試的頁面。

之前我曾經在《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，所以整個過程可能比較費時，需要耐心等待。

約定

我們假定要被測試的頁面是這樣的：


    
        標題
    
    
        
            Hello World!
        
        Another Page

開始編寫測試

首先是導入。我們推薦使用 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

云服務器 GPU云服務器進行測試 java進行接口測試 ui自動化測試工具云主機上可以進行壓力測試嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93478.html

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

摘要：約定我們假定要被測試的頁面是這樣的標題開始編寫測試首先是導入。我們推薦使用的語法當然您也可以用方式第一件事是構造一個實例然后要轉到要被測試的頁面。之前我曾經在《Rize - 一個可以讓你簡單、優雅地使用 puppeteer 的 Node.js 庫》一文簡單介紹過 Rize 這個庫。當時僅僅是介紹這個庫本身，關于如何使用，我沒有給太多的指導。這篇文章講的是如何使用 Rize 來做 U...

yimo 2019-08-01 18:42 評論0 收藏0
利用 Rize 來進行 UI 測試或 E2E 測試

摘要：約定我們假定要被測試的頁面是這樣的標題開始編寫測試首先是導入。我們推薦使用的語法當然您也可以用方式第一件事是構造一個實例然后要轉到要被測試的頁面。之前我曾經在《Rize - 一個可以讓你簡單、優雅地使用 puppeteer 的 Node.js 庫》一文簡單介紹過 Rize 這個庫。當時僅僅是介紹這個庫本身，關于如何使用，我沒有給太多的指導。這篇文章講的是如何使用 Rize 來做 U...

Lin_R 2019-05-29 17:03 評論0 收藏0
Rize - 一個可以讓你簡單、優雅的使用 puppeteer 的 Node.js 庫

摘要：目前已經成為了非常流行的的庫，被廣泛用于爬蟲或測試。然而，的幾乎所有的都是異步的，它返回的是一個。而提供了一系列的，使得測試變得簡單方便，測試同樣沒有問題。更多的可以參考的文檔鏈接在下方。目前 puppeteer 已經成為了非常流行的 Node.js 的庫，被廣泛用于爬蟲或 UI 測試。我也很歡喜 puppeteer 這個庫。然而，puppeteer 的幾乎所有的 API 都是異步...

JeOam 2019-08-22 15:07 評論0 收藏0
Rize - 一個可以讓你簡單、優雅的使用 puppeteer 的 Node.js 庫

摘要：目前已經成為了非常流行的的庫，被廣泛用于爬蟲或測試。然而，的幾乎所有的都是異步的，它返回的是一個。而提供了一系列的，使得測試變得簡單方便，測試同樣沒有問題。更多的可以參考的文檔鏈接在下方。目前 puppeteer 已經成為了非常流行的 Node.js 的庫，被廣泛用于爬蟲或 UI 測試。我也很歡喜 puppeteer 這個庫。然而，puppeteer 的幾乎所有的 API 都是異步...

AZmake 2019-05-29 17:03 評論0 收藏0
[緣起] 前端 E2E 測試的困境

摘要：與其它自動化測試不同，前端的測試一直是個老大難問題，難點主要在于如何描述測試。自動化測試的核心是檢查特定輸入能不能得到符合預期的結果。結構不能反應視圖的真實狀態，很可能會出現雖然測試通過，但實際上在用戶眼里仍然是錯誤的表現。與其它自動化測試不同，前端的 E2E 測試一直是個老大難問題，難點主要在于如何描述測試。自動化測試的核心是檢查特定輸入能不能得到符合預期的結果。對于單元測試和...

awokezhou 2019-05-29 17:14 評論0 收藏0