天津市建设工程网站安徽省建设工程信息网官方网站

前两篇文章《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();   // 打开urlawait 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 } = argconst { url } = taskconst 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 } = argconst { selector } = taskconst 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 } = argawait 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去实现，代码不太优雅！！！各位有啥想法不？优雅的优化方式！！！
相关源码