本文主要是介绍基于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(); // 打开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去实现,代码不太优雅!!!各位有啥想法不?优雅的优化方式!!!
这篇关于基于Puppeteer实现配置自动化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!