Puppeteer

概念：

headless browser（无头浏览器）：

是一种在无界面的环境中运行浏览器，与正常浏览器的区别
- 直接通过命令行或者程序语言操作
- 没有界面，少了加载 css/js、渲染页面的工作，比真实浏览器更快，更稳定

Puppeteer： 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行

Selenium: 2004年就发布了，支持多种浏览器，多编程语言

Puppeteer & Selenium 对比

功能：

网页截图或者生成 PDF
爬取 SPA 或 SSR 网站
UI 自动化测试，模拟表单提交，键盘输入，点击等行为
捕获网站的时间线，帮助诊断性能问题
创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例
测试 Chrome 扩展程序

实例：

截图或生成PDF。

const puppeteer = require('puppeteer');(async () => {// 生成browser实例const browser = await puppeteer.launch();// 调出界面配置// const browserConfig = {//     headless: false// };// const browser = await puppeteer.launch(browserConfig);// 解析一个新的页面。页面是在默认浏览器上下文创建的const page = await browser.newPage();await page.setViewport({ width: 1000, height: 500 });await page.goto('https://www.jianshu.com/p/c269277ca2d4');// 生成图片await page.screenshot({ path: 'images/example.png' });// 生成pdfawait page.pdf({ path: 'page.pdf' });// 截全屏await page.screenshot({path: 'images/homepage.png',fullPage: true})// 截取对应选择器部分await page.goto('https://www.baidu.com');let clip = await page.evaluate(() => {let {x,y,width,height} = document.getElementById('form').getBoundingClientRect();return {x,y,width,height};});await page.screenshot({path: 'images/baidu.png',clip: clip //设置clip 属性});await browser.close();
})();

生成页面或爬虫

// 生成页面
const Koa = require('koa');
const fs = require('fs');
const puppeteer = require('puppeteer');const app = new Koa();
const baseUrl = 'http://www.baidu.com';//这里是真实SPA页面的地址
app.use(async (ctx, next) => {let browser = await puppeteer.launch({ dumpio: true, args: ['--no-sandbox', '--disable-setuid-sandbox'], timeout: 10000 });const page = await browser.newPage();try {let myUrl = baseUrl + ctx.url;await page.goto(myUrl); //到指定页面的网址.await page.waitFor(5000);} catch (err) {await page.close();await browser.disconnect();console.log('出现错误：' + err); // 这里捕捉到错误 `error`}let html = await page.content()ctx.type = "text/html;charset=utf-8";ctx.body = html.replace('</body>', '<div>Puppeteer test</div></body>');await page.close();await browser.close();});app.listen('3388');
console.log('3388端口爬虫代理程序已启动');

const puppeteer = require("puppeteer");
const fs = require("fs");
const path = require("path");const getNewList = async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto("http://news.baidu.com/");//等待“国内”导航按钮出现await page.waitForSelector("#channel-all > div > ul > li:nth-child(3) > a");//点击“国内”导航按钮，进入国内新闻页面await page.click("#channel-all > div > ul > li:nth-child(3) > a");//等待“即时新闻列表”出现await page.waitForSelector("#instant-news > ul");//通过evaluate函数执行自定义的js代码获取要爬取的数据const newList = await page.evaluate(() => {//创建一个空数组接收爬取的数据let data = [];//获取所有即时新闻列表li元素const elements = document.querySelectorAll("#instant-news > ul > li");//利用循环将即时新闻列表的标题和链接地址添加到一个数组中for (let i = 0; i < elements.length; i++) {//获取新闻的标签let title = elements[i].innerText;//获取新闻的链接地址let url = elements[i].firstChild.getAttribute('href');//将获取到的标题和链接地址添加到数组中data.push({title,url});}//返回数组return data;});//关闭浏览器实例await browser.close();//返回爬取的数据return newList;
}
//执行函数获取爬取的数据
getNewList().then(res => {//将爬取的数据转为json格式let list = JSON.stringify(res);//指定存储数据的json文件let file = path.join(__dirname, "newList.json");//将爬取的数据写入json文件fs.writeFile(file, list, err => {if (err) {console.log(err);} else {console.log("success");}})
})

自动提交表单，进行 UI 测试，键盘输入等。

const puppeteer = require("puppeteer");
(async () => {const browser = await puppeteer.launch({slowMo: 100,    //放慢速度headless: false,defaultViewport: { width: 1440, height: 780 },ignoreHTTPSErrors: false, //忽略 https 报错args: ['--start-fullscreen'] //全屏打开页面});const page = await browser.newPage();await page.goto('https://www.baidu.com');const element = await page.$('#kw');await element.type('Puppeteer', { delay: 20 });const okButtonElement = await page.$('#su');//等待页面跳转完成，一般点击某个按钮需要跳转时，都需要等待 page.waitForNavigation() 执行完毕才表示跳转成功await Promise.all([okButtonElement.click(),page.waitForNavigation()]);// await page.close();// await browser.close();
})();

拦截请求

const puppeteer = require("puppeteer");
(async () => {const browser = await puppeteer.launch({headless: false,});const page = await browser.newPage();const blockTypes = new Set(['image', 'media', 'font']);await page.setRequestInterception(true); //开启请求拦截page.on('request', request => {const type = request.resourceType();const shouldBlock = blockTypes.has(type);if (shouldBlock) {//直接阻止请求return request.abort();} else {//对请求重写return request.continue({//可以对 url，method，postData，headers 进行覆盖headers: Object.assign({}, request.headers(), {'puppeteer-test': 'true'})});}});await page.goto('https://www.baidu.com');
})();

注入脚本

const puppeteer = require('puppeteer');
(async () => {const browser = await puppeteer.launch({ headless: false });const page = await browser.newPage();await page.goto('https://www.baidu.com');await page.addScriptTag({ url: 'https://code.jquery.com/jquery-3.2.1.min.js' });// await page.close();// await browser.close();
})();

捕获网站的 timeline trace，用来帮助分析性能问题。

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();// 开始跟踪await page.tracing.start({ path: 'trace.json' });await page.goto('https://www.baidu.com');await page.waitForSelector('title');// 结束跟踪await page.tracing.stop();// 各种加载时间const loadMetrics = await page.evaluate(() => JSON.stringify(window.performance));console.info(JSON.parse(loadMetrics));// 运行时间 Performance.getMetricsconst metrics = await page.metrics();console.info('运行时间>>>', metrics);await browser.close();
})();

跟踪文件可以在 chrome://tracing 中打开分析

Puppeteer 使用相关推荐

puppeteer爬虫的奇妙之旅
@(爬虫)[puppeteer|] 爬虫又称网络机器人.每天或许你都会使用搜索引擎,爬虫便是搜索引擎重要的组成部分,爬取内容做索引.现如今大数据,数据分析很火,那数据哪里来呢,可以通过网络爬虫爬取啊. ...
puppeteer php,puppeteer 页面爬取实例（元素遍历）
内容提取 const puppeteer = require('puppeteer'); var url = process.argv.splice(2)[0]; /** * 提取内容 * /usr/ ...
Puppeteer爬虫初探
今天发现了一个很好玩的node库,Puppeteer,准备玩一下.先来看看官方的介绍. Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chro ...
centos及ubuntu安装 Puppeteer/rendertron所需的依赖包
安装谷歌的Puppeteer/rendertron时需要安装一些依赖包, 否则会报错, 整体如下: ubuntu: apt install gconf-service libasound2 libat ...
网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018...
这次 Google 开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ,分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程.它是一个 ...
实例：使用puppeteer headless方式抓取JS网页
puppeteer google chrome团队出品的puppeteer 是依赖nodejs和chromium的自动化测试库,它的最大优点就是可以处理网页中的动态内容,如JavaScript,能够更 ...
react骨架屏自动生成_用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏
骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构,直到请求数据返回后再显示真正的页面内容:随着单页应用( SPA )的越来越流行,单页应用的用户体验也越来越得到前端开发者的关注:为了优化用 ...
puppeteer(headless chrome)实现网站登录
puppeteer简介 puppeteer是Chrome团队开发的一个node库,可以通过api来控制浏览器的行为,比如点击,跳转,刷新,在控制台执行js脚本等等.有了这个神器,写个爬虫,自动签到,网 ...
爬虫利器 puppeteer
1. 爬虫利器 puppeteer实战转载于:https://www.cnblogs.com/knuzy/p/9485624.html
使用puppeteer爬 EXTJS
(async () => {// 载入配置文件并使用JSON.parse()解析 var config = JSON.parse(fs.readFileSync('./config.json') ...

Puppeteer 使用

Puppeteer

概念：

功能：

实例：

Puppeteer 使用相关推荐

最新文章

热门文章