Rize - 一个可以让你简单、优雅的使用 puppeteer 的 Node.js 库

lazycat 发布于6月前 阅读46次
0 条评论

目前 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

  • smallpanda
  • tinylion
  • greenwolf
  • brownmeercat
  • tinyelephant
  • greenleopard
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。