npm 包 expect-puppeteer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，自动化测试是必不可少的一环。其中，UI 自动化测试便是需要模拟用户行为，完成各种浏览器页面操作，比较常见的工具有 Selenium , WebDriver ，但他们使用繁琐且成本高。现在，我们有了 puppeteer ，它是谷歌官方推荐的无头浏览器。puppeteer 支持多种操作，如点击、输入、截图等等，同时也能获取 DOM 节点、CSS 样式等信息。

expect-puppeteer 则是在 puppeteer 之上封装了 expect 脚本库，在浏览器中运行测试用例，主要用于 UI 自动化测试。下面我们就来详细介绍一下 expect-puppeteer 的使用方法。

安装 expect-puppeteer

安装过程非常简单，只需要运行以下命令即可：

npm install expect-puppeteer

使用 expect-puppeteer

使用 expect-puppeteer 之前需要先调用 puppeteer.launch() 方法来启动一个浏览器实例。启动浏览器之后，就可以进行各种浏览器页面操作，如点击元素、输入文本、获取 DOM 节点等。

示例代码

以下是一个简单的示例代码，展示了 expect-puppeteer 的基本使用方法：

-- -------------------- ---- -------
----- --------- - ---------------------
----- ------ - ----------------------------

-- -------------
--- -------- -----
--------------- -- -- -
    ------- - ----- -------------------
    ---- - ----- ------------------
    ----- ------------------------------------
---

--------------- ----- -- -- -
    ----- -----------------------------------
---

-------------------- ----- -- -- -
    ----- ---------------- ------
    ----- -----------------------------
    ----- -------------------------

    --- ---------- - ----- ---------------- -- -
        --- ----- - --------------------------------------------- -----
        ------ -------------- -- -----------
    ---

    ---------------------------------------------
---

-- -----
-------------- -- -- -
    ----- ----------------
---

expect-puppeteer 的断言方式

expect-puppeteer 中，除了可以直接使用 expect 断言库提供的方法外，还提供了一些与浏览器页面操作相关的断言方法。以下是一些常用的断言方法：

.toMatchElement(selector, { visible: true })

用于断言指定选择器的元素是否出现在页面中，有时候页面上的元素是动态生成的，这时候就可以使用这个方法来判断元素是否存在。visible 为 true 时，表示断言元素是否可见。

await expect(page).toMatchElement('#btn')
await expect(page).toMatchElement('#dialog', { visible: true })

.toMatch(text)

用于断言页面上是否包含了指定的文本内容。

await expect(page).toMatch('欢迎来到 expect-puppeteer 的世界')

.toMatchElement(selector, { text: 'expected text' })

用于断言指定选择器的元素的文本内容是否与预期相符。

await expect(page).toMatchElement('#header', { text: 'expect-puppeteer' })

.toClick(selector[, options])

用于断言是否能够点击指定选择器的元素。options 参数可用于设置点击事件的参数，如 button 按键、键盘修饰符等。

await expect(page).toClick('#btn')
await expect(page).toClick('#btn', { button: 'right', clickCount: 2 })
await expect(page).toClick('#btn', { delay: 1000 }) // 延迟 1 秒后点击

.toFill(selector, value)

用于断言是否能够填入指定选择器的元素文本内容，value 参数表示要输入的文本值。

await expect(page).toFill('#username', 'test')
await expect(page).toFill('#password', '123456')

.toSelect(selector, value)

用于断言是否可以选中指定的下拉框选项，value 参数表示要选中的选项值。

await expect(page).toSelect('#city', 'shanghai')
await expect(page).toSelect('#province', 'hubei')

.toUploadFile(selector, file)

用于模拟文件上传操作，file 参数为上传的文件路径。

await expect(page).toUploadFile('#file', '/path/to/file')

.toDisplayDialog(fn, [timeout])

用于测试页面的弹窗交互，fn 参数为一个回调函数，可以模拟交互操作，timeout 参数表示等待弹窗出现的时间。

await expect(page).toDisplayDialog(async () => {
    page.click('#alert');
    await page.waitFor(2000);
})

总结

通过对 expect-puppeteer 的使用教程，我们可以看到 expect-puppeteer 让 UI 自动化测试更加简单直观，断言方式也更贴合浏览器操作。同时 expect-puppeteer 也提供了很多常用的元素操作方法，方便我们进行 DOM 操作。在实际项目中使用 expect-puppeteer 可以更好的保证项目的质量和稳定性。

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