前言：moretv-tast 是一个基于 Puppeteer 的 Nodejs 库，用于进行 UI 自动化测试。它的特点是功能强大且易用，支持中文操作及断言，同时具有良好的扩展性与定制性。本文章将详细介绍如何使用 moretv-tast 进行前端 UI 测试。
安装
在项目目录中，使用以下命令进行安装：
npm install moretv-tast --save-dev
快速上手
使用 moretv-tast 进行 UI 自动化测试，需要先创建一个测试框架，在框架中导入 moretv-tast，并编写测试代码。以下提供一个快速使用 moretv-tast 的示例：
-- -------------------- ---- -------
----- - ------------ - - -----------------------
----- ------------ - --- --------------
--------- -----
---
------------------------- -- -- -
----- ---- - ----- ----------------------
---- ----------------------
---
----- ------------------------------ ------ -----
----- -------------------------------
----- --------------------------- ------ -----
----- ---------------------
---运行上述代码，将会启动 Chrome 浏览器，自动访问百度首页，输入“hello 宝宝”并点击搜索按钮，然后断言页面标题中包含“hello 宝宝”。若测试结果通过，则输出以下语句：
PASS: Found correct string in title.
测试框架
在测试框架中，需要先创建一个 TestLauncher 的实例，并传入配置项，例如：
const { TestLauncher } = require('moretv-tast');
const testLauncher = new TestLauncher({
headless: false,
slowMo: 250 //设置执行速度
});TestLauncher 的常用配置项及含义如下：
headless：是否启动 Headless 模式，默认为true。executablePath：可执行版 Chrome 的路径，仅在 headless 模式下有效。slowMo：设置代码执行速度，单位为毫秒。timeout：设置每个测试用例的最大执行时间，单位为毫秒。viewport：设置浏览器窗口大小。logger：设置日志输出方式。
页面对象
在 moretv-tast 中，页面对象是指经过封装并提供了更高层次方法的页面实例。在测试代码中，推荐使用页面对象来进行页面操作。
页面对象包含了更多的方法，例如input、click、assertInclude、getContext等。以下是一个简单的示例：
-- -------------------- ---- ------- -------- ----- ---- - ----- ---------------------- ---- ---------------------- --- ------ ----- ------------------------------ ------ ----- ------ ----- ------------------------------- ---- ----- --------------------------- ------ -----
选择器
在 moretv-tast 中，选择器是指用于定位元素的字符串。内置了以下 6 种选择器：
Selector: CSS 选择器。XPathSelector: XPath 选择器。LinkSelector: 链接选择器，用于根据链接文本选择元素。TextSelector: 文本选择器，用于根据元素文本内容选择元素。AttributeValueSelector: 属性值选择器，用于根据元素属性值选择元素。LabelSelector: 标签名称选择器，用于选择某种类型的元素。
以下是它们的具体用法：
CSS 选择器：
await page.click(Selector('.demo-button'));XPath 选择器：
await page.click(XPathSelector('//button'));链接文本选择器：
await page.click(LinkSelector('链接文本'));元素文本内容选择器：
await page.click(TextSelector('元素文本内容'));元素属性值选择器：
await page.click(AttributeValueSelector('属性名', '属性值'));标签名称选择器：
await page.click(LabelSelector('select'));常用操作
- 点击元素
await page.click(Selector('.demo-button'));- 输入文本
await page.input(Selector('input'), 'hello world');- 选择下拉框选项
await page.select(Selector('select'), '选项文本');- 切换窗口
await page.switchTo(1); //通过索引
await page.switchTo('http://www.baidu.com'); //通过 url- 断言页面标题
await page.assertTitle('页面标题');- 断言元素包含指定文本
await page.assertInclude(Selector('p'), '文本内容');- 断言元素不包含指定文本
await page.assertNotInclude(Selector('p'), '文本内容');更多的操作方法可以查阅官方文档。
总结
使用 moretv-tast 进行前端 UI 自动化测试，可以大大提高测试效率，减少测试成本，并在一定程度上保证了测试的稳定性与准确性。本文介绍了 moretv-tast 的使用方法，并提供了详细的示例代码以及常用操作方法。希望读者可以从中受益，并在项目中应用它，创造更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac66886