与Puppeteer一起学习端到端测试

>本教程探讨了软件测试的世界，并演示了如何使用节点库Puppeteer来进行Web应用程序的有效端到端测试。 我们将介绍不同的测试类型，然后使用简单的计数器应用程序构建一个实用的示例。

>

密钥概念：

• Puppeteer：通过DevTools协议控制铬或铬的功能强大的node.js库。端到端测试和浏览器自动化的理想选择。 它默认为无头模式，但可以使用可见的浏览器窗口运行。>
>
• 测试类型：我们将检查四个关键测试方法：静态测试（使用衬里和类型系统），单元测试（测试单个代码单元），集成测试（测试多个单元的交互） ，以及端到端测试（模拟整个应用程序中的真实用户交互）。 使用PuppeTeer：
端到端测试：教程提供了使用Puppeteer设置和执行端到端测试的逐步指南。 这包括导航页面，等待特定元素，提取数据并验证应用程序行为。
• 什么是Puppeteer？ Puppeteer >

>先决条件：

本教程假设对JavaScript（ES6），Node.js和Yarn（软件包管理器）的熟悉度。 基本的木偶知识是有帮助的，但并不是严格要求。 该教程使用：

节点13.3.0

纱线1.21.1

> Puppeteer 2.0.0

create-react-app 3.3.0

• >测试简介：>>
测试验证了应用程序功能，并有助于尽早识别错误。 上面提到的四种测试类型构成了全面的测试策略。 “测试奖杯”（如下图）在视觉上表示这些测试的层次性质。
>
• 用伪装者进行端到端测试：一个实践的示例

我们将使用创建一个简单的计数器应用程序，然后用puppeteer进行测试。>

1. 项目设置：创建一个新的反应项目：npx create-react-app e2e-puppeteer>
2. 运行应用程序：cd e2e-puppeteer && yarn start
>
3. 安装puppeteer： yarn add -D puppeteer
>
4. 计数器应用程序实现：修改和App.js以增量和减少按钮创建计数器。 App.css
木偶测试：
5. >在中写下伪造者测试以验证计数器的功能（初始状态，增量，减少）。 这些测试使用>，App.test.js，page.waitForSelector和断言来检查应用程序行为。page.$eval page.click
>运行测试：
6. > yarn test

结论：

>本教程提供了使用Puppeteer的端到端测试的实用介绍。 Puppeteer的功能不仅仅是测试，这使其成为各种浏览器自动化任务的宝贵工具。 完整的代码可在github上获得（原始文本中未提供链接，如果可用，则需要添加）。 可以通过SitePoint Premium获得进一步的测试资源（原始文本中未提供的链接，需要添加如果可用的话）。>

FAQS：

>本节回答了有关木偶的常见问题，包括其目的，与其他工具的差异，其在自动化和刮擦中的使用，无头浏览器的概念以及其跨浏览器的兼容性。 （输出中包括原始常见问题解答。）>

以上是与Puppeteer一起学习端到端测试的详细内容。更多信息请关注PHP中文网其他相关文章！