实例:使用puppeteer headless方式抓取JS网页

2024-03-11 18:32

本文主要是介绍实例:使用puppeteer headless方式抓取JS网页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

puppeteer

google chrome团队出品的puppeteer 是依赖nodejs和chromium的自动化测试库,它的最大优点就是可以处理网页中的动态内容,如JavaScript,能够更好的模拟用户。
有些网站的反爬虫手段是将部分内容隐藏于某些javascript/ajax请求中,致使直接获取a标签的方式不奏效。甚至有些网站会设置隐藏元素“陷阱”,对用户不可见,脚本触发则认为是机器。这种情况下,puppeteer的优势就凸显出来了。
它可实现如下功能:
1. 生成页面的屏幕截图和PDF。
2. 抓取SPA并生成预先呈现的内容(即“SSR”)。
3. 自动表单提交,UI测试,键盘输入等。
4. 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能,直接在最新版本的Chrome中运行测试。
5. 捕获跟踪您网站的时间线,以帮助诊断性能问题。

开源地址:[https://github.com/GoogleChrome/puppeteer/][1]

安装
npm i puppeteer

注意先安装nodejs, 并在nodejs文件根目录下执行(npm文件同级)。
安装过程中会下载chromium,大约120M。

用两天(大约10小时)摸索,绕过了相当多的异步的坑,笔者对puppeteer和nodejs有了一定的掌握。
一张长图,抓取blog文章列表:
这里写图片描述

抓取blog文章

以csdn blog为例,文章内容需要点击“阅读全文”来获取,这就导致只能读取dom的脚本失效。

/**
* load blog.csdn.net article to local files
**/
const puppeteer = require('puppeteer');
//emulate iphone
const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1';
const workPath = './contents';
const fs = require("fs");
if (!fs.existsSync(workPath)) {fs.mkdirSync(workPath)
}
//base url
const rootUrl = 'https://blog.csdn.net/';
//max wait milliseconds
const maxWait = 100;
//max loop scroll times
const makLoop = 10;
(async () => {let url;let countUrl=0;const browser = await puppeteer.launch({headless: false});//set headless: true will hide chromium UIconst page = await browser.newPage();await page.setUserAgent(userAgent);await page.setViewport({width:414, height:736});await page.setRequestInterception(true);//filter to block imagespage.on('request', request => {if (request.resourceType() === 'image')request.abort();elserequest.continue();});await page.goto(rootUrl);for(let i= 0; i<makLoop;i++){try{await page.evaluate(()=>window.scrollTo(0, document.body.scrollHeight));await page.waitForNavigation({timeout:maxWait,waitUntil: ['networkidle0']});}catch(err){console.log('scroll to bottom and then wait '+maxWait+'ms.');}}await page.screenshot({path: workPath+'/screenshot.png',fullPage: true, quality :100, type :'jpeg'});//#feedlist_id li[data-type="blog"] aconst sel = '#feedlist_id li[data-type="blog"] h2 a';const hrefs = await page.evaluate((sel) => {let elements = Array.from(document.querySelectorAll(sel));let links = elements.map(element => {return element.href})return links;}, sel);console.log('total links: '+hrefs.length);process();async function process(){if(countUrl<hrefs.length){url = hrefs[countUrl];countUrl++;}else{browser.close();return;}console.log('processing url: '+url);try{const tab = await browser.newPage();await tab.setUserAgent(userAgent);await tab.setViewport({width:414, height:736});await tab.setRequestInterception(true);//filter to block imagestab.on('request', request => {if (request.resourceType() === 'image')request.abort();elserequest.continue();});await tab.goto(url);//execute tap requesttry{await tab.tap('.read_more_btn');}catch(err){console.log('there\'s none read more button. No need to TAP');}let title = await tab.evaluate(() => document.querySelector('#article .article_title').innerText);let contents = await tab.evaluate(() => document.querySelector('#article .article_content').innerText);contents = 'TITLE: '+title+'\nURL: '+url+'\nCONTENTS: \n'+contents;const fs = require("fs");fs.writeFileSync(workPath+'/'+tab.url().substring(tab.url().lastIndexOf('/'),tab.url().length)+'.txt',contents);console.log(title + " has been downloaded to local.");await tab.close();}catch(err){console.log('url: '+tab.url()+' \n'+err.toString());}finally{process();}}
})();

执行过程

录屏可以在我公众号查看,下边是截图:

这里写图片描述

执行结果

文章内容列表:

这里写图片描述

文章内容:

这里写图片描述

结束语

以前就想过既然nodejs是使用JavaScript脚本语言,那么它肯定能处理网页的JavaScript内容,但并没有发现合适的/高效率的库。直到发现puppeteer,才下定决心试水。
话说回来,nodejs的异步真的是很头疼的一件事,这上百行代码我竟然折腾了10个小时。
大家可拓展下代码中process()方法,使用async.eachSeries,我使用的递归方式并不是最优解。
事实上,逐一处理并不高效,原本我写了一个异步的关闭browser方法:

let tryCloseBrowser = setInterval(function(){console.log("check if any process running...")if(countDown<=0){clearInterval(tryCloseBrowser);console.log("none process running, close.")browser.close();}},3000);

按照这个思路,代码的最初版本是同时打开多个tab页,效率很高,但容错率很低,大家可以试着自己写一下。

题外话

看过我的文章的人都知道,我写文章更强调处理问题的方式/方法,给大家一些思维上的建议。
对于nodejs和puppeteer我是完全陌生的(当然,我知道他们适合做什么,仅此而已)。如果大家还记得《10倍速程序员》里提到的按需记忆的理念,那么你就会理解我刻意的去系统的学习新技术。
我说说我接触puppeteer到完成我需要功能的所有思维逻辑:
1. 了解puppeteer功能/特性,结合目的判断是否满足要求。
2. 快速实现getStart中的所有demo
3. 二次判断puppeteer的特性,从设计者角度出发,推测puppeteer的架构。
4. 验证架构。
5. 通读api,了解puppeteer细节。
6. 搜索puppeteer前置学习内容(以及前置学习内容所依赖的前置学习内容)。整理学习内容,回到1。
7. 设计/分析/调试/……

2018年5月9日02点13分

这篇关于实例:使用puppeteer headless方式抓取JS网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/798676

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类:一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如,如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项,那么就查看 drivers/scsi/aha1542.c 文件,一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma