基于Puppeteer实现配置自动化

前两篇文章《Node.js和Puppeteer进行Web抓取的简单使用》 和《Puppeteer结合Jest对网页进行测试》已经了解到Puppeteer大致可以做点什么事情，之前提到过最终自动化需要一个数组配置。这篇文章将会简单是一个读取配置文件实现自动化的脚本。

脚本

就拿《Node.js和Puppeteer进行Web抓取的简单使用》 代码举例：

const puppeteer = require(‘puppeteer’); let scrape = async () => { // 打开一个浏览器 const browser = await puppeteer.launch(); // 新建一个页面 const page = await browser.newPage(); // 打开url await page.goto(‘https://www.johancruijffarena.nl/calendar.htm'); // 针对某个元素 获取数据 const result = await page.evaluate(() => { var data = []; var tables = document.querySelectorAll(‘table’); data = tables.length; return data; }, ); // 关闭浏览器 browser.close(); return result } scrape().then((value) => { console.log(value); });

这个就是日常mk代码逻辑，如果要转换配置化，那就先理清步骤，然后对配置数据建模。

开始构建数据、纯函数

从代码看出来，可以列出步骤如下： 步骤1: 打开一个浏览器； 步骤2: 新建一个页面； 步骤3: 打开url； 步骤4: 针对某个元素 获取数据； 步骤5: 关闭浏览器 可以看出每个步骤都是一个操作类型，这个时候，数据里面可以定一个操作类型的key：nodeType；

{ nodeType: any } 步骤1

因为一个流程只操作一个浏览器，因此配置数据可以省略这个步骤，当程序运行时默认执行这个步骤就好了，同时帮步骤1操作提取一个函数(尽量保证是一个纯函数，后续会有篇幅),

const getBrowser = async () => { const browser = await puppeteer.launch(); return browser } 步骤2和步骤3

步骤2和步骤3可以合并成一个步骤，打开一个页面，那必须得跳转url吧！那么可得到一个配置数据：

{ nodeType: 'start', url: 'https://www.johancruijffarena.nl/calendar.htm' },

创建一个只打开页面的纯函数：

const runNodeStart = async (arg) => { const { browser, task } = arg const { url } = task const page = await browser.newPage() await page.goto(url, { waitUntil: 'domcontentloaded', }); return page } 步骤4

该操作也得定义nodeType，告诉程序该做什么事情，因为需要检索元素需要关键字，可以设置selector为key

{ nodeType: 'pick', selector: 'table' }

函数：

const getPick = async (arg) => { const { task } = arg const { selector } = task const result = await page.evaluate(() => { var data = []; var tables = document.querySelectorAll( selector ); data = tables.length; return data; }, ); return result } 步骤5:

同理可以得到一个配置数据：

{ nodeType: 'close', },

一个函数：

const runClose = async (arg) => { const { browser, task, page } = arg await browser.close(); return false } 配置数据如下 const datas = [ {. // 打开页面 nodeType: 'start', url: 'https://www.johancruijffarena.nl/calendar.htm' }, { // 获取数据 nodeType: 'pick', selector: 'table' }, { // 关闭浏览器 nodeType: 'close', }, ] MK代码实现

其实一看数据配置就是一个数组，只要我们遍历这个数组，就可以完成我们配置自动化的效果。for循环简单粗暴:

const main = async () => { const browser = await getBrowser() const len = datas.length let page = null let pickData = '' for (let i = 0; i < len; i++) { const { nodeType } = datas[i] if (nodeType === 'start') { const data = await runNodeStart( { browser, task: datas[i]}) page = data.page } else if (nodeType === 'pick') { pickData = await getPick( { browser, task: datas[i], page} ) } else if (nodeType === 'close') { await runClose({browser}) } } }

当然这块代码，还是有很大的优化空间，必须实现功能较全的自动化，通过for、if、else if去实现，代码不太优雅！！！各位有啥想法不？优雅的优化方式！！！ 相关源码