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