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

gplane發表於2018-03-05
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 倉庫：github.com/g-plane/riz… （歡迎 star）

Rize 庫的文件教程：rize.js.org/

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

相關文章