Rize - 能让你优雅地使用 puppeteer 的库（可用于 React 的 E2E 测试）

#1

对于一个 React 应用，通常有两种测试，一种是单元测试，另一种是 E2E 测试。在 puppeteer 出现以后，我们可以借助 puppeteer 来帮我们进行 E2E 测试。

然而，puppeteer 的几乎所有的 API 都是异步的，它返回的是一个 Promise。

这就导致整个代码有点啰嗦，下面是一个简单的例子：

const assert = require('assert')
const puppeteer = require('puppeteer')

test('a simple test', async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://example.com')
  const text = await page.$eval('.greeting', element => element.textContent)
  assert.strictEqual(text, 'Hello World')
  await browser.close()
})

如您所见，一堆的 await 关键字使得代码不太优雅。

为此，我受到了 Laravel Dusk 的启发，写了 Rize 这个库。

上面的例子如果用 Rize 重写，将会是这个样子：

const Rize = require('rize')

const rize = new Rize()
rize
  .goto('http://example.com')
  .assertSeeIn('.greeting', 'Hello World')
  .end()

除此之外，Rize 还提供了很多方便实用的断言方法，使得测试变得简单。例如，您可以用 assertClassHas 方法来断言某个元素上存在指定的类名，等等。

更多的 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

1 Like