标题：🚀 使用pptr-testing-library提升你的Puppeteer测试体验 🧑‍💻

2024-05-23 13:11:36作者：滕妙奇

1、项目介绍

pptr-testing-library 是一个神奇的工具，它将流行的 Puppeteer 和 @testing-library/dom 结合在一起，为您的端到端测试带来前所未有的便利性。这个库让你能够在Puppeteer中享受与在React或任何其他DOM环境中相同的用户中心查询功能，从而实现更加直观和高效的浏览器自动化测试。

2、项目技术分析

pptr-testing-library 引入了一个优雅的方法，让你能够直接在Puppeteer的Page对象上获取文档ElementHandle，并提供了一套完整的查询方法，如 getByTestId, getByLabelText 等。此外，还支持原型扩展，允许你在ElementHandle上直接调用这些查询方法。更棒的是，它还包括了一个 wait 函数，用于等待某个条件不再抛出异常，这是基于 waitForExpect 的封装。

3、项目及技术应用场景

pptr-testing-library 非常适合用于以下场景：

端到端（E2E）测试：在真实浏览器环境中模拟用户交互，验证应用行为。
Web爬虫：辅助抓取页面信息，通过更友好的方式查询元素。
网站性能监控：自动化检查网页加载速度、元素渲染等关键指标。

4、项目特点

- 用户友好查询：

提供了与 @testing-library/react 类似的查询API，让测试代码更符合人类思维，易于理解。

- 原型扩展：

可以选择直接在Puppeteer的page对象或ElementHandle上添加查询方法，提高代码的简洁度。

- 自定义等待：

自定义的 wait 函数使你能灵活地控制等待逻辑，等待特定状态出现或消失。

- 兼容性：

虽然一些高级特性受限，但基本的查询和交互操作都能无缝与Puppeteer整合。

想要提升Puppeteer测试的效率和可读性吗？立即尝试 pppt-testing-library，让测试编写变得简单而强大！

安装命令：

npm install --save-dev pptr-testing-library

示例代码：

const puppeteer = require('puppeteer');
const {getDocument, queries} = require('pptr-testing-library');

const {$document, getByTestId} = queries;

const browser = await puppeteer.launch();
const page = await browser.newPage();

const $form = await getByTestId(getDocument(page), 'my-form');
await $form.type('pptr@example.com');