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

2024年1月31日 235次阅读 来源: gplane

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

    原文作者：gplane
    原文地址: https://segmentfault.com/a/1190000013536345
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞