puppeteer recorder详解

“ puppeteer recorder 是一款专门为puppeteer提供的插件，用来进行录制”

01—官网插件描述

Chrome extension for recording browser interaction and generating Puppeteer scripts Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

Writing Puppeteer scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful. This extension has the following features:

• Record clicks, input events etc.
• Pause the recording when navigating.
• Monitor recorded events.
• Export to Puppeteer code.
• Tweak the settings of the generated code.

This extension is actively developed. More events and actions will be added in later versions.

02—安装

1. 进入Chrome web store.
2. 查找puppeteer recorder
3. add to chrome

4.添加成功后如下图所示就可以开始玩耍了

03—使用

1.打开开始录制

2.开始执行测试

步骤如下：

打开bing，在bing中输入puppeteer，点击search，点击第一个链接

3.录制的脚本如下

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch() const page = await browser.newPage() const navigationPromise = page.waitForNavigation() await navigationPromise await page.waitForSelector('#sbox > .search_controls > #sb_form > .b_searchboxForm > #sb_form_go') await page.click('#sbox > .search_controls > #sb_form > .b_searchboxForm > #sb_form_go') await navigationPromise await page.waitForSelector('#b_results > .b_algo:nth-child(1) > .b_title > h2 > a') await page.click('#b_results > .b_algo:nth-child(1) > .b_title > h2 > a') await navigationPromise await browser.close() })()

04—设置

Puppeteer Recorder Options

配置项主要是关于代码生成的设置。

接着我们取消这些打钩项。执行同样的步骤看下生成的代码

生成代码如下：

const puppeteer = require('puppeteer'); const browser = await puppeteer.launch({ headless: false }) const page = await browser.newPage() await page.click('#sbox > .search_controls > #sb_form > .b_searchboxForm > #sb_form_go') await page.click('#b_results > .b_algo:nth-child(1) > .b_title > h2 > a') await browser.close()

对比两段代码：第二段代码少了 await navigationPromise ，代码间的空行没有了，puppeteer.launch({ headless: false }) 添加了headless: false，取消了无头模式。

更多测试好文请关注如下微信公众号：