在前端开发中，我们通常需要进行端到端测试来验证我们的应用程序是否按预期工作。在这篇文章中，我们将探讨如何使用 Jest 和 Puppeteer 进行端到端测试，并分享一些技巧和技巧，以便您可以更有效地测试您的应用程序。
什么是 Jest 和 Puppeteer？
Jest 是一个流行的 JavaScript 测试框架，它提供了一些强大的功能，例如快照测试、mocking 和断言。Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一个高级 API，使您可以控制 Chrome 或 Chromium 浏览器并进行自动化测试。
安装 Jest 和 Puppeteer
首先，我们需要安装 Jest 和 Puppeteer。您可以使用 npm 来安装它们：
npm install --save-dev jest puppeteer
编写端到端测试
一旦我们安装了 Jest 和 Puppeteer，我们就可以开始编写端到端测试了。让我们从一个简单的测试开始，该测试将打开 Google 首页并验证标题是否正确：
-- -------------------- ---- ------- ----- --------- - --------------------- ------------------ -- -- - --- -------- --- ----- --------------- -- -- - ------- - ----- ------------------- ---- - ----- ------------------ ----- ------------------------------------- --- -------------- -- -- - ----- ---------------- --- ---------- ---- --- ------- ------- ----- -- -- - ----- ----- - ----- ------------- ----------------------------- --- ---展开代码
在上面的代码中，我们首先导入 Puppeteer 并定义一个测试套件，该测试套件包含一个测试用例。在测试用例中，我们使用 puppeteer.launch() 方法启动 Chrome 浏览器，并使用 browser.newPage() 方法创建一个新页面。然后，我们使用 page.goto() 方法导航到 Google 首页。最后，我们使用 page.title() 方法获取页面标题，并使用 Jest 的 expect() 断言方法验证它是否等于 "Google"。
使用页面选择器
在编写端到端测试时，您可以使用页面选择器来查找页面上的元素。Puppeteer 提供了一个方便的 $() 方法，该方法接受一个选择器并返回与该选择器匹配的第一个元素。例如，以下代码将查找 Google 搜索框并在其中输入文本：
const searchBox = await page.$('input[name="q"]'); await searchBox.type('Jest and Puppeteer'); await searchBox.press('Enter');
在上面的代码中，我们使用 $() 方法查找具有名称 "q" 的输入元素，并使用 type() 方法向其中输入文本。然后，我们使用 press() 方法模拟按下 Enter 键。
使用 waitFor() 方法
在编写端到端测试时，您可能需要等待某些操作完成后才能执行下一步操作。例如，您可能需要等待页面加载完成或等待某些元素出现在页面上。Puppeteer 提供了一个方便的 waitFor() 方法，该方法接受一个选择器并等待与该选择器匹配的元素出现在页面上。例如，以下代码将等待 Google 搜索结果页面加载完成：
await page.waitFor('#search');
在上面的代码中，我们使用 waitFor() 方法等待具有 ID "search" 的元素出现在页面上。
使用 Jest 的快照测试
Jest 提供了一种称为快照测试的测试方法，它可以捕获组件的呈现输出并将其保存为静态文件。然后，每次运行测试时，Jest 将呈现输出与先前保存的快照进行比较。如果呈现输出与快照不同，则测试将失败。
您可以使用 Jest 的 toMatchSnapshot() 方法创建一个快照测试。例如，以下代码将创建一个快照测试，该测试将捕获 Google 搜索结果页面的呈现输出并将其保存为静态文件：
it('should match the snapshot', async () => { const searchResults = await page.$('#search'); const screenshot = await searchResults.screenshot(); expect(screenshot).toMatchSnapshot(); });
在上面的代码中，我们使用 page.$() 方法查找具有 ID "search" 的元素，并使用 screenshot() 方法捕获呈现输出。然后，我们使用 Jest 的 toMatchSnapshot() 方法将其与先前保存的快照进行比较。
结论
在本文中，我们介绍了如何使用 Jest 和 Puppeteer 进行端到端测试，并分享了一些技巧和技巧，以便您可以更有效地测试您的应用程序。通过使用这些技巧和技巧，您可以更轻松地编写端到端测试，并确保您的应用程序按预期工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67582d815b8c5cbb5f7d5b31
