什么是 puppeteer-recorder？
puppeteer-recorder 是一个基于 Puppeteer 的 npm 包，用于记录并生成 Puppeteer 页面自动化测试代码。使用 puppeteer-recorder，可以很容易地创建自动化测试脚本，而无需手动编写代码。
如何使用 puppeteer-recorder？
在你的项目中，首先需要安装 puppeteer-recorder，可以使用以下命令：
npm install puppeteer-recorder --save-dev
安装完成后，可以通过以下步骤录制并生成代码：
1. 启动浏览器
使用 Puppeteer 中的 launch 方法启动浏览器，并通过该浏览器创建一个页面。
const puppeteer = require('puppeteer');
const { record } = require('puppeteer-recorder');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();2. 访问网页并录制操作
在页面中输入以下代码，以访问知乎首页，并录制页面操作：
await page.goto('https://www.zhihu.com/');
await record({
page: page,
output: 'example.spec.js',
showBrowser: true
});其中，record 方法的 output 参数指定了将要输出的自动化测试脚本文件名，showBrowser 参数指定是否在录制过程中展示浏览器窗口。
3. 生成自动化测试脚本代码
执行以上代码后，会在项目根目录下生成一个名为 example.spec.js 的自动化测试脚本文件。打开该文件，可以看到 puppeteer-recorder 已经为我们自动生成了测试脚本代码。
以下是一个示例代码：
-- -------------------- ---- -------
--------------- ---- ------ -- -- -
--- -----
--------------- -- -- -
---- - ----- -----------------------------
---
-------------- -- -- -
----- -------------
---
---------- ---- ------- ------- ----- -- -- -
----- ------------------------------------
---
---------- ---- ----------- ---- ------ ----- ----- -- -- -
----- ----------------------------------------------
----- ---------------------------------- -------------
----- -----------------------------
---
---------- -------- ------- ------ --------- ----- -- -- -
----- ------------------------------------------
----- ------- - ----- -------------------------- -----------------
------------------------------------------
---
---使用建议
puppeteer-recorder 为我们自动生成了自动化测试脚本代码，但我们仍然需要对测试脚本进行修改和优化。以下是一些使用建议：
在运行自动化测试脚本之前，先手动执行一遍测试场景，确保在自动化测试过程中没有意外的错误发生。
优化测试脚本的性能，例如通过调整等待时间、避免使用无效的等待方法等。
遵循最佳实践，例如将共有的代码放在 describe 中的 beforeAll 和 afterEach 中、将页面对象封装成 PageObject 等。
总结
puppeteer-recorder 是一款方便易用的工具，可以快速录制和生成自动化测试代码。在使用时，我们需要对自动生成的代码进行修改和优化，以达到更好的测试效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8881e8991b448e601d