在前端开发中，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