Rize - 一個可讓你簡單、優雅的使用 puppeteer 的 Node.js 庫

目前 puppeteer 已經成爲了很是流行的 Node.js 的庫，被普遍用於爬蟲或 UI 測試。

我也很歡喜 puppeteer 這個庫。然而，puppeteer 的幾乎全部的 API 都是異步的，它返回的是一個 Promise。

這就致使整個代碼有點囉嗦，下面是官方的例子：

const puppeteer = require('puppeteer')

void (async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://example.com')
  await page.screenshot({ path: 'example.png' })
  await browser.close()
})()

如您所見，一堆的 await 關鍵字使得代碼不太優雅。爲了要使用 async/await，您必須將代碼放入一個當即執行函數（IIFE）裏。

爲此，我受到了 Laravel Dusk 的啓發，寫了 Rize 這個庫。

上面的例子若是用 Rize 重寫，將會是這個樣子：

const Rize = require('rize')

const rize = new Rize()
rize
  .goto('http://example.com')
  .saveScreenshot('example.png')
  .end()

代碼簡單得多了。另外，鏈式的 API 調用也是代碼變得優雅。

除了提供基本的操做（如頁面導航、對 DOM 操做、與表單進行交互），Rize 這個庫還提供了一些斷言方法。

爲何呢？由於咱們常常利用 puppeteer 來進行 UI 測試。而 Rize 提供了一系列的 assertions，使得 UI 測試變得簡單、方便，E2E 測試一樣沒有問題。

例如，您能夠斷言當前頁面的 URL：

const rize = new Rize()
rize.assertUrlIs('http://example.com')

又或者斷言指定的文本是否存在於頁面上：

const rize = new Rize()
rize.assertSee('Some text')

還能夠爲 DOM 斷言：

const rize = new Rize()
rize.assertClassHas('div', 'my-class')

上面這個函數能夠斷言指定的元素上是否存在指定的類名。更多的 API 能夠參考 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