在前端开发中，自动化测试是必不可少的一环。其中，UI 自动化测试便是需要模拟用户行为，完成各种浏览器页面操作，比较常见的工具有 Selenium , WebDriver ，但他们使用繁琐且成本高。现在，我们有了 puppeteer ，它是谷歌官方推荐的无头浏览器。puppeteer 支持多种操作，如点击、输入、截图等等，同时也能获取 DOM 节点、CSS 样式等信息。
expect-puppeteer 则是在 puppeteer 之上封装了 expect 脚本库，在浏览器中运行测试用例，主要用于 UI 自动化测试。下面我们就来详细介绍一下 expect-puppeteer 的使用方法。
安装 expect-puppeteer
安装过程非常简单，只需要运行以下命令即可：
--- ------- ----------------
使用 expect-puppeteer
使用 expect-puppeteer 之前需要先调用 puppeteer.launch() 方法来启动一个浏览器实例。启动浏览器之后，就可以进行各种浏览器页面操作，如点击元素、输入文本、获取 DOM 节点等。
示例代码
以下是一个简单的示例代码，展示了 expect-puppeteer 的基本使用方法：
----- --------- - ---------------------
----- ------ - ----------------------------
-- -------------
--- -------- -----
--------------- -- -- -
------- - ----- -------------------
---- - ----- ------------------
----- ------------------------------------
---
--------------- ----- -- -- -
----- -----------------------------------
---
-------------------- ----- -- -- -
----- ---------------- ------
----- -----------------------------
----- -------------------------
--- ---------- - ----- ---------------- -- -
--- ----- - --------------------------------------------- -----
------ -------------- -- -----------
---
---------------------------------------------
---
-- -----
-------------- -- -- -
----- ----------------
---expect-puppeteer 的断言方式
expect-puppeteer 中，除了可以直接使用 expect 断言库提供的方法外，还提供了一些与浏览器页面操作相关的断言方法。以下是一些常用的断言方法：
.toMatchElement(selector, { visible: true })
用于断言指定选择器的元素是否出现在页面中，有时候页面上的元素是动态生成的，这时候就可以使用这个方法来判断元素是否存在。visible 为 true 时，表示断言元素是否可见。
----- ----------------------------------- ----- -------------------------------------- - -------- ---- --
.toMatch(text)
用于断言页面上是否包含了指定的文本内容。
----- -------------------------- ---------------- -----
.toMatchElement(selector, { text: 'expected text' })
用于断言指定选择器的元素的文本内容是否与预期相符。
----- -------------------------------------- - ----- ------------------ --
.toClick(selector[, options])
用于断言是否能够点击指定选择器的元素。options 参数可用于设置点击事件的参数，如 button 按键、键盘修饰符等。
----- ---------------------------- ----- ---------------------------- - ------- -------- ----------- - -- ----- ---------------------------- - ------ ---- -- -- -- - ----
.toFill(selector, value)
用于断言是否能够填入指定选择器的元素文本内容，value 参数表示要输入的文本值。
----- -------------------------------- ------- ----- -------------------------------- ---------
.toSelect(selector, value)
用于断言是否可以选中指定的下拉框选项，value 参数表示要选中的选项值。
----- ------------------------------ ----------- ----- ---------------------------------- --------
.toUploadFile(selector, file)
用于模拟文件上传操作，file 参数为上传的文件路径。
----- ---------------------------------- ----------------
.toDisplayDialog(fn, [timeout])
用于测试页面的弹窗交互，fn 参数为一个回调函数，可以模拟交互操作，timeout 参数表示等待弹窗出现的时间。
----- ---------------------------------- -- -- -
---------------------
----- -------------------
--总结
通过对 expect-puppeteer 的使用教程，我们可以看到 expect-puppeteer 让 UI 自动化测试更加简单直观，断言方式也更贴合浏览器操作。同时 expect-puppeteer 也提供了很多常用的元素操作方法，方便我们进行 DOM 操作。在实际项目中使用 expect-puppeteer 可以更好的保证项目的质量和稳定性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/62075