在前端开发中，我们经常需要进行 UI 测试来验证我们的应用程序是否按预期工作。而 Puppeteer 是一个流行的 Node.js 库，可以用来进行端到端测试，即使用自动化浏览器模拟用户操作来测试应用程序的功能。
在本文中，我们将介绍如何使用 Jest 和 Puppeteer 来进行端到端测试，以确保我们的应用程序按预期工作。我们还将分享一些技巧和最佳实践，以帮助您更好地利用这些工具。
安装 Jest 和 Puppeteer
在开始之前，我们需要首先安装 Jest 和 Puppeteer。您可以使用以下命令来安装它们：
npm install jest puppeteer --save-dev
编写测试用例
现在我们可以开始编写测试用例了。我们将从一个简单的示例开始，该示例将访问 Google 首页并验证页面标题是否正确。
-- -------------------- ---- -------
----- --------- - ---------------------
------------------ -- -- -
--- --------
--- -----
--------------- -- -- -
------- - ----- -------------------
---- - ----- ------------------
---
-------------- -- -- -
----- ----------------
---
------------ ------- -------- ---- -- ------ ----- -- -- -
----- ------------------------------------
----- ----- - ----- -------------
-----------------------------
---
---在这个示例中，我们首先导入 Puppeteer 并定义了一个测试套件。在测试套件中，我们定义了两个钩子函数 beforeAll 和 afterAll，它们分别在测试套件运行前和后运行。
在 beforeAll 钩子函数中，我们启动了一个浏览器实例并创建了一个新页面。在 afterAll 钩子函数中，我们关闭了浏览器实例。
在测试用例 test 中，我们首先使用 page.goto 方法访问 Google 首页。然后我们使用 page.title 方法获取页面标题，并使用 Jest 的 expect 方法来验证标题是否为 'Google'。
使用 Jest 的 Matchers
Jest 提供了许多 Matchers，可以用来验证测试结果。在我们的测试用例中，我们使用了 toBe Matcher，它可以用来比较两个值是否相等。
除了 toBe 之外，Jest 还提供了许多其他 Matchers，如 toEqual、toMatch、toContain 等等。您可以根据需要选择适当的 Matcher 来验证测试结果。
使用 Puppeteer 的 API
在编写测试用例时，我们需要使用 Puppeteer 的 API 来模拟用户操作。以下是一些常用的 Puppeteer API：
page.goto(url[, options])：访问指定的 URL。page.waitForSelector(selector[, options])：等待指定的选择器出现在页面上。page.type(selector, text[, options])：在指定的输入框中输入文本。page.click(selector[, options])：单击指定的元素。page.evaluate(pageFunction[, ...args])：在页面上下文中执行 JavaScript 代码。
您可以查看 Puppeteer 的文档以获取更多 API 和示例。
使用 Jest 的 Snapshot Testing
除了 Matchers 之外，Jest 还提供了 Snapshot Testing，可以用来验证 UI 的变化。在 Snapshot Testing 中，Jest 会在第一次运行测试用例时生成一个快照，并将其保存在磁盘上。在后续运行测试用例时，Jest 会再次生成快照并将其与之前的快照进行比较。如果两个快照不同，测试用例将失败。
以下是一个使用 Snapshot Testing 的示例：
test('should display "Google" text on page', async () => {
await page.goto('https://www.google.com');
const title = await page.title();
expect(title).toMatchSnapshot();
});在这个示例中，我们使用 toMatchSnapshot Matcher 来验证页面标题是否与之前的快照相同。如果页面标题发生了变化，测试用例将失败。您可以使用 --updateSnapshot 选项来更新快照。
结论
在本文中，我们介绍了如何使用 Jest 和 Puppeteer 进行端到端测试，并分享了一些技巧和最佳实践。我们希望这些内容能够帮助您更好地利用这些工具来测试您的应用程序。如果您有任何问题或建议，请随时与我们联系。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67428adadb344dd98ddc58a6