Puppeteer--代码⽰例（1）
1、截图
使⽤ Puppeteer 既可以对某个页⾯进⾏截图，也可以对页⾯中的某个元素进⾏截图：
(async () => {
const browser = await puppeteer.launch();
const page = wPage();
//设置可视区域⼤⼩
await page.setViewport({width: 1920, height: 800});
('youdata.163');
//对整个页⾯截图
await page.screenshot({
path: './files/capture.png', //图⽚保存路径
type: 'png',
fullPage: true//边滚动边截图
// clip: {x: 0, y: 0, width: 1920, height: 800}
});
//对页⾯某个元素截图
let [element] = await page.$x('/html/body/section[4]/div/div[2]');
await element.screenshot({
path: './files/element.png'
});
await page.close();
await browser.close();
})();
我们怎么去获取页⾯中的某个元素呢？
page.$('#uniqueId')：获取某个选择器对应的第⼀个元素
page.$$('div')：获取某个选择器对应的所有元素
page.$x('//img')：获取某个 xPath 对应的所有元素
page.waitForXPath('//img')：等待某个 xPath 对应的元素出现
page.waitForSelector('#uniqueId')：等待某个选择器对应的元素出现
nodeselector2、模拟⽤户登录
(async () => {
const browser = await puppeteer.launch({
slowMo: 100, //放慢速度
headless: false,
defaultViewport: {width: 1440, height: 780},
ignoreHTTPSErrors: false, //忽略 https 报错
args: ['--start-fullscreen'] //全屏打开页⾯
});
const page = wPage();
('udata');
//输⼊账号密码
const uniqueIdElement = await page.$('#uniqueId');
pe('admin@admin', {delay: 20});
const passwordElement = await page.$('#password', {delay: 20});
pe('123456');
//点击确定按钮进⾏登录
let okButtonElement = await page.$('#btn-ok');
//等待页⾯跳转完成，⼀般点击某个按钮需要跳转时，都需要等待 page.waitForNavigation() 执⾏完毕才表⽰跳转成功
await Promise.all([
okButtonElement.click(),
page.waitForNavigation()
]);
console.log('admin 登录成功');
await page.close();
await browser.close();
})();
那么 ElementHandle 都提供了哪些操作元素的函数呢？
elementHandle.click()：点击某个元素
elementHandle.tap()：模拟⼿指触摸点击
elementHandle.focus()：聚焦到某个元素
elementHandle.hover()：⿏标 hover 到某个元素上
3、请求拦截
在有些场景下很有必要，拦截⼀下没必要的请求以提⾼性能，我们可以在监听 Page 的 request 事件，并进⾏请求拦截，前提是要开启请求拦截
(async () => {
const browser = await puppeteer.launch();
const page = wPage();
const blockTypes = new Set(['image', 'media', 'font']);
await page.setRequestInterception(true); //开启请求拦截
<('request', request => {
const type = sourceType();
const shouldBlock = blockTypes.has(type);
if(shouldBlock){
//直接阻⽌请求
return request.abort();
}else{
/
/对请求重写
inue({
//可以对 url，method，postData，headers 进⾏覆盖
headers: Object.assign({}, request.headers(), {
'puppeteer-test': 'true'
})
});
}
});
('udata');
await page.close();
await browser.close();
})();
那 page 页⾯上都提供了哪些事件呢？
<('close') 页⾯关闭
<('console') console API 被调⽤
<('error') 页⾯出错
<('load') 页⾯加载完
<('request') 收到请求
<('requestfailed') 请求失败
<('requestfinished') 请求成功
<('response') 收到响应
<('workercreated') 创建 webWorker
<('workerdestroyed') 销毁 webWorker
4、获取 WebSocket 响应
Puppeteer ⽬前没有提供原⽣的⽤于处理 WebSocket 的 API 接⼝，但是我们可以通过更底层的 Chrome DevTool Protocol (CDP) 协议获得(async () => {
const browser = await puppeteer.launch();
const page = wPage();
//创建 CDP 会话
let cdpSession = await page.target().createCDPSession();
//开启⽹络调试，监听 Chrome DevTools Protocol 中 Network 相关事件
await cdpSession.send('able');
//监听 webSocketFrameReceived 事件，获取对应的数据
<('Network.webSocketFrameReceived', frame => {
let payloadData = sponse.payloadData;
if(payloadData.includes('push:query')){
//解析payloadData，拿到服务端推送的数据
let res = JSON.parse(payloadData.match(/\{.*\}/)[0]);
de !== 200){
console.log(`调⽤websocket接⼝出错:code=${de},message=${ssage}`);
}else{
console.log('获取到websocket接⼝数据：', sult);
}
}
});
('udata.163/dash/142161/reportExport?pid=700209493');
await page.waitForFunction('derdone', {polling: 20});
await page.close();
await browser.close();
})();
5、植⼊ javascript 代码
Puppeteer 最强⼤的功能是，你可以在浏览器⾥执⾏任何你想要运⾏的 javascript 代码，下⾯是我在爬 188 邮箱的收件箱⽤户列表时，发现每次打开收件箱再关掉都会多处⼀个 iframe 来，随着打开收件箱的增多，iframe 增多到浏览器卡到⽆法运⾏，所以我在爬⾍代码⾥加了删除⽆⽤ iframe 的脚本：
(async () => {
const browser = await puppeteer.launch();
const page = wPage();
('webmail.vip.188');
//注册⼀个 Node.js 函数，在浏览器⾥运⾏
poseFunction('md5', text =>
);
//通过 page.evaluate 在浏览器⾥执⾏删除⽆⽤的 iframe 代码
await page.evaluate(async () => {
let iframes = ElementsByTagName('iframe');
for(let i = 3; i < iframes.length - 1; i++){
let iframe = iframes[i];
if(iframe.name.includes("frameBody")){
iframe.src = 'about:blank';
try{
}catch(e){}
//把iframe从页⾯移除
veChild(iframe);
}
}
//在页⾯中调⽤ Node.js 环境中的函数
const myHash = await window.md5('PUPPETEER');
console.log(`md5 of ${myString} is ${myHash}`);
});
await page.close();
await browser.close();
})();
有哪些函数可以在浏览器环境中执⾏代码呢？
page.evaluate(pageFunction[, ...args])：在浏览器环境中执⾏函数
page.evaluateHandle(pageFunction[, ...args])：在浏览器环境中执⾏函数，返回 JsHandle 对象
page.$$eval(selector, pageFunction[, ...args])：把 selector 对应的所有元素传⼊到函数并在浏览器环境执⾏
page.$eval(selector, pageFunction[, ...args])：把 selector 对应的第⼀个元素传⼊到函数在浏览器环境执⾏
page.evaluateOnNewDocument(pageFunction[, ...args])：创建⼀个新的 Document 时在浏览器环境中执⾏，会在页⾯所有脚本执⾏之前执⾏
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论