基于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去实现，代码不太优雅！！！各位有啥想法不？优雅的优化方式！！！
相关源码