puppeteer是什么
Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。
puppeteer 能做什么
- 生成页面 PDF。
- 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
- 自动提交表单，进行 UI 测试，键盘输入等。
- 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
- 捕获网站的 timeline trace，用来帮助分析性能问题。
- 测试浏览器扩展。
puppeteer 基本使用
- 由于puppeteer是node库，所以先确保是否有node环境，然后初始化项目
npm init projectNmae - 安装 puppeteer
npm i puppeteer --save
- 下面是puppeteer的基槽(跟日常百度操作一样)
- 创建一个
Browser实例 - 打开页面
- 输入要到的地址
- 其他操作(见 -> puppeteer 能做什么)
代码
/*
* 1. ()() 是函数的自调用
* 2. 由于大量操作，需要异步进行，所以使用了async await。
* 3. 用完记得关闭，不然会一直占用浏览器内存
* 4. 基本结构就是下面这个样子
*/
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch(); // 打开一个浏览器
const page = await browser.newPage(); // 打开页面
await page.goto('https://example.com'); // 页面要跳转的地址
/*
* 其他操作,在这里你可以放飞自我
*
*
/
await browser.close(); // 关闭浏览器
})();
利用puppeteer进行截图操作
// 在其他操作处新增
await page.screenshot({path: 'example.png'});
代码
const bounding_box = await page.waitForSelector('.a-spacing-double-large');
const codeImg = await page.waitForSelector('.a-text-center > img');
const bounding_boxClip = await bounding_box.boundingBox()
const codeImgclip = await codeImg.boundingBox()
await page.screenshot({
path: './public/img/example.png',
clip: {
x: bounding_boxClip.x + 70,
y: bounding_boxClip.y + 310,
width: codeImgclip.width,
height: codeImgclip.height
}
});
tip
1. path还可以指定文件名，以及文件路径 ， ./src/example.png (图片名是自己定的，但是文件夹得自己先建好)
2. 对特定区域进行截图
2.1 通过waitForSelector，获取元素
2.2 通过boundingBox获取元素的信息(元素的x轴坐标, 元素的y轴坐标，长，宽)
2.3
利用 screenshot({
clip
}) 进行截图操作
关于waitForSelector的选择使用
- 审查元素，右击，选择copy -> js path / selector
2. 选择元素之后，可以搜索一下 waitForSelector选择的元素防止class / id 重复，造成选择失误
常用 API
-
page.waitForSelector要等待的元素选择器 (由于页面的加载是异步的，所以这个api会常用) -
page.type获取输入框焦点并输入文字 -
page.keyboard.press模拟键盘按下某个按键，目前mac上组合键无效为已知bug -
page.waitFor页面等待，可以是时间、某个元素、某个函数 -
page.click()点击一个元素 -
page.frames()获取当前页面所有的iframe，然后根据iframe的名字精确获取某个想要的iframe -
iframe.$('.srchsongst')获取iframe中的某个元素 -
iframe.evaluate()在浏览器中执行函数，相当于在控制台中执行函数，返回一个Promise -
Array.from将类数组对象转化为对象 -
iframe.$eval()相当于在iframe中运行document.queryselector获取指定元素，并将其作为第一个参数传递 -
iframe.$$eval相当于在iframe中运行document.querySelectorAll获取指定元素数组，并将其作为第一个参数传递
