puppeteer学习笔记(八)--API问题解决--使用 ” evaluate “函数执行自定义js脚本
官方英文版API入口:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
***API入口:https://yq.aliyun.com/articles/607102.
学习笔记入口:https://blog.csdn.net/qupan1993/article/details/85371556.
我们可以使用page.evaluaate()函数来执行自定义的一些js脚本,在写爬虫的时候我们需要得到一些网址、文本、图片、视频等信息,我们需要去解析网页Dom得到信息并返回,这些都在函数中进行,先看一下官方给的解释和小demo
1、好啦上个例子看看喽、抓取百度首页右上角的标题和对应的URL网址。这个大概就是很简单的爬虫入门了吧
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
await page.goto('https://www.baidu.com/',{waitUntil:'networkidle2'});
await page.waitFor('#u1');
// 得到百度右上角的标题和相应的URL网址
const result = await page.evaluate(() => {
let data = []; // 初始化空数组来存储数据
let elements = document.querySelectorAll('#u1 > a'); // 获取所有元素
for (var element of elements){
let title = element.innerText; // 获取标题
let url = element.href;//获取网址
data.push({title,url}); // 存入数组
}
return data;
});
console.log(result);//打印出信息
await page.waitFor(3000);
await browser.close();
})();
这个是我运行后得到的数据:
解析开始啦:
1、首先在第6行goto()函数中,我添加了waitUntil:'networkidle2’这个参数,是为了等待网络没有连接,因为我们抓取信息当然要全部加载出来的
2、第9行中,使用page.evaluate()函数,在里面我使用了原生的js语法document.querySelectorAll()来获取右上角包含标签a的所有元素,返回一个NodeList的对象,这个js只能在evaluate中使用,在外边使用会报错。
3、12-16行,使用for循环来遍历出所有的a元素,并得到标题和URL添加到列表中,进行返回,这个基本就是一个最简单的爬虫了,当然高深一些的并不止于这些,爬到数据后加入数据库,存放到文件中。。等等,后续慢慢学习
2、让脚本更简洁,从上面脚本中我们知道是需要得到所有的元素,进行遍历取值,所以我们可以使用map()函数进行改进
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com/',{waitUntil:'networkidle2'});
await page.waitFor('#u1');
// 得到百度右上角的标题和相应的URL网址
const result = await page.evaluate(() => {
let data = el => {return {title:el.innerText,url:el.href} };//设置提取函数
let elements = [...document.querySelectorAll('#u1 > a')]; // 获取所有元素
return elements.map(data);//遍历elements列表,得到标题和url
});
console.log(result);
await page.waitFor(3000);
await browser.close();
})();
看看结果,一模一样啊有木有:
1、是的,你可以看到evaluate中只需要3行代码就可以搞定,简洁吧!哈哈,不过用到的东西可是挺难得呢
2、第10行中先定义好map()需要执行的函数,因为要得到文本和标题,所以我写了两个,后面return中一定要写成类似于这种形式{title:el.innerText,url:el.href}才可以的呢。
3、第11行中使用原生js得到所有a标签的元素返回一个Nodelist的对象,使用 ”…“ 的语法来调用对象中所有a标签元素,“…”这个符号表示:数组/对象的扩展运算符,如果不懂得小伙伴自行去学习一下。
4、第12行使用map()函数进行操作,传入设置好的函数data,并且使用ruturn把新的值返回