npm 包 uirecorder-intl 使用教程

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

Install

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

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

npm install --save-dev uirecorder-intl

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

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

Usage

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

1. 执行录制操作

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

const recorderIntl = require('uirecorder-intl');
const recorder = recorderIntl.getRecorder("chrome", "en");

recorder.start('Transaction', 'Transaction Test case 1', (doneCb) => {
    console.log('start...')
    doneCb();
});

这段代码使用 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. 执行断言

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

recorder.assert('click', '#navbarSupportedContent > ul > li.nav-item.dropdown.show > div > a:nth-child(2)', 'xpath',
    {"tagName":"A",
    "child":[{"tagName":"DIV", "style": "display: block;"},
        {"tagName":"A"}]}, {},
    (doneCb) => {
        console.log('done...')
        doneCb();
    });

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

Conclusion

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

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