随着前端技术的不断发展，越来越多的应用实现了在浏览器端运行的功能。在进行前端开发时，我们需要对所开发的应用进行测试，包括 UI 测试、交互测试等等。其中，浏览器端的测试相对复杂，在很长一段时间内，开发人员需要手工通过浏览器插件，或者是 Selenium 等自动化测试工具进行测试。
而对于 Jest 使用者而言，使用 Jest 中自带的 Puppeteer 进行浏览器端测试是一种更为方便和高效的方式。本文将详细介绍如何在 Jest 中使用 Puppeteer 进行浏览器端测试，从而帮助大家更加高效地进行前端端测试。
Puppeteer 简介
Puppeteer 是一个提供了 Chrome 或 Chromium 浏览器所提供的大部分功能 API 的 Node.js 库。利用 Puppeteer，可以模拟用户在浏览器上的行为，例如点击、输入、选择等。同时，Puppeteer 也提供了 Chrome DevTools Protocol API，可以获取浏览器相关的信息，如执行性能分析、截取网页截图等。
在 Jest 中使用 Puppeteer
下面，我们将详细讲解在 Jest 中如何使用 Puppeteer 进行浏览器端测试。
安装与配置
首先，我们需要安装 Jest 和 Puppeteer。在安装 Puppeteer 时，为了避免下载 Chromium 浏览器过程慢的情况，我们可以通过以下命令使用淘宝镜像进行安装：
npm i jest puppeteer -D --registry=https://registry.npm.taobao.org
安装完成后，我们需要在 Jest 的配置文件 jest.config.js 中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
---- -----------------------
--
---------- ------------------------------
-------- -----
-------- -------------------
------------------- --------------------
--其中，globals.URL 指定测试的 url 地址，testMatch 指定 Jest 检索测试文件的规则，verbose 为 true 时会显示测试过程中所有的 log 信息，testURL 指定运行测试的域名，setupFilesAfterEnv 指定在每次测试前需要执行的脚本文件。
编写测试用例
在编写测试用例前，我们需要先编写一个简单的 web 应用来进行测试。在本文中，我们以一个简单的计数器应用为例。
在 index.html 文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- -----------
-------
------
--- -------------------
------- -------------------------
------- -------------------------
------- --------------------------
-------
-------在 index.js 中添加以下内容：
-- -------------------- ---- ------- --- ----- - -- ----- --------- - ----------------------------------- ----- ------------ - ------------------------------------- ----- ------------ - ------------------------------------- -------------------------------------- -- -- - -------- --------------------- - ------ --- -------------------------------------- -- -- - -------- --------------------- - ------ ---
这个应用实现了一个简单的记数器功能，包括一个 h1 标签用于显示计数器的值，以及两个按钮用于增加或减少计数器的值。
接下来，我们编写一个测试用例文件 Counter.test.js
-- -------------------- ---- -------
----- ------- - -----
---------
-- -------- ------
-- -- -
--- -----
--------------- -- -- -
---- - ----- -----------------------------
----- ---------------
-- ---------
-------------- -- -- -
----- -------------
---
------------ ------- --- -- ---- ------ ----- -- -- -
----- --------- - ----- -------------------
----- ------------ - ----- --------------
----------- -- ----------------------
---------
--
-------------------------------
---
------------ --------- --- ------- -- ------- ----- -- -- -
----- -------------------------
----- --------- - ----- -------------------
----- ------------ - ----- --------------
----------- -- ----------------------
---------
--
-------------------------------
---
------------ --------- --- ------- -- ------- ----- -- -- -
----- -------------------------
----- --------- - ----- -------------------
----- ------------ - ----- --------------
----------- -- ----------------------
---------
--
--------------------------------
---
--
-------
--这个测试用例包含了三个测试，分别测试了在页面加载时计数器显示为 0，点击增加按钮后计数器值为 1，以及点击减少按钮后计数器值为 -1。
在这个测试用例中，我们首先通过 await global.__BROWSER__.newPage() 方法创建了一个浏览器页面。然后通过 await page.goto(URL) 方法访问我们要测试的应用地址。在每个测试开始前，我们通过 beforeAll 方法打开页面，并通过 afterAll 方法在测试结束后关闭页面。
在具体的测试中，我们先通过 await page.$("#xxx") 方法获取元素，再通过 await page.evaluate() 方法获取元素的文本值，判断测试结果是否符合预期。
启动测试
测试代码编写完成后，我们就可以开始执行测试了。在终端中，使用以下命令执行测试：
npx jest
如果一切正常，我们应该会看到测试结果如下：
-- -------------------- ---- -------
---- -------------------------
- -------- ----
- ------ ------- --- -- ---- ---- --- ---
- ------ --------- --- ------- -- ----- --- ---
- ------ --------- --- ------- -- ----- --- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -
--- --- ---- ------ -------- ------------------------------总结
在本文中，我们介绍了如何在 Jest 中使用 Puppeteer 进行浏览器端测试。通过 Puppeteer，我们可以模拟用户在浏览器上的行为，例如点击、输入、选择等，从而实现自动化测试。希望这篇文章能够帮助读者更加高效地进行前端端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ebc9648841e9894b45e47