npm 包 uirecorder-intl 使用教程

阅读时长 4 分钟读完

在前端开发中,UI 自动化测试是非常重要的一环。而 uirecorder-intl 包则是一个方便开发者录制和回放 UI 操作的 npm 包。本文将会在深入探讨这个包的使用方法以及示例。

Install

在继续本文之前,我们需要先安装 uirecorder-intl。在安装之前,需要确保你已经安装了 node.js 和 npm。

接下来,我们可以在项目根目录下打开 terminal,运行以下代码完成安装:

注意在这里我们使用了 -dev 标记,因为开发环境使用的工具库通常只是针对测试或者打包,不会在生产环境中出现。

安装完成后,我们就可以进行下一步的操作。

Usage

使用 uirecorder-intl 很简单,只需要几行代码即可完成操作。

1. 执行录制操作

首先,我们需要录制一段 UI 操作的过程,这一步是通过 uirecorder-intl 的 API 完成的。

这段代码使用 require 引入 uirecorder-intl 中的 getRecorder 方法,这个方法返回一个 Recorder 对象,这个对象通常是需要不同浏览器去初始化的。这里我们以 chrome 为例,并设置录制的语言为英文。

然后我们调用 Recorder 对象上的 start 方法,传递两个参数:Transaction 和 Transaction Test case 1,这表示我们就是在录制「Transaction」这个任务的第一个测试用例。这个 start 方法返回一个 doneCb 函数,可以在录制完成后进行回调。

2. 执行 HTML 交互操作

接下来,我们需要执行与 HTML 交互的操作。

-- -------------------- ---- -------
--------------------------- ------------------ - --- --------
    ---------------
    ------------------------
    -------------------------
        ------------------ ---
    -------- -- -
        --------------------------
        ---------
    ---

这段代码将使用 addAction API 来(代表用户的)点击 id 为 #menuTransactions > a 的 HTML 元素。

3. 执行断言

最后,我们可以添加执行断言的逻辑。

这段代码将在 HTML 中查找与参数所传递的属性匹配的元素,来保证代码的正确性。

Conclusion

在本文中,我们了解了如何使用 uirecorder-intl 这个 npm 包来完成 UI 自动测试的操作,包括如何初始化 Recorder 对象,如何执行 HTML 交互操作和如何添加断言。在实际使用的时候,我们可以对这些步骤进行进一步的扩展以适应自己的需求。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4ca

纠错
反馈