使用puppeteer實(shí)現(xiàn)瀏覽器自動(dòng)化
Puppeteer 是一個(gè) Node 庫，它提供了一個(gè)高級 API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome。Puppeteer 默認(rèn)以 headless 模式運(yùn)行，但是可以通過修改配置文件運(yùn)行“有頭”模式。
可以實(shí)現(xiàn)手動(dòng)操作瀏覽器的所有功能
生成頁面 PDF。
抓取 SPA（單頁應(yīng)用）并生成預(yù)渲染內(nèi)容（即“SSR”（服務(wù)器端渲染））。
自動(dòng)提交表單，進(jìn)行 UI 測試，鍵盤輸入等。
創(chuàng)建一個(gè)時(shí)時(shí)更新的自動(dòng)化測試環(huán)境。 使用最新的 JavaScript 和瀏覽器功能直接在最新版本的Chrome中執(zhí)行測試。
捕獲網(wǎng)站的 timeline trace，用來幫助分析性能問題。
測試瀏覽器擴(kuò)展。
安裝
安裝有瀏覽器的版本
npm i puppeteer這個(gè)版本自帶Chromium瀏覽器，體積在300多M
2024.1更新
現(xiàn)在默認(rèn)不會(huì)安裝Chromium，如果要安裝，運(yùn)行上述代碼以后，再運(yùn)行"node node_modules\puppeteer\install.js"，如果提示沒有install.js，則運(yùn)行"node_modules\puppeteer\install.mjs"
如果電腦有谷歌瀏覽器，可以使用下面代碼
npm i puppeteer-core
簡單使用
截圖
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//設(shè)置可視區(qū)域大小
await page.setViewport({width: 1920, height: 800});
await page.goto('https://youdata.163.com');
//對整個(gè)頁面截圖
await page.screenshot({
path: './files/capture.png', //圖片保存路徑
type: 'png',
fullPage: true //邊滾動(dòng)邊截圖
// clip: {x: 0, y: 0, width: 1920, height: 800}
});
//對頁面某個(gè)元素截圖
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();
})();
模擬用戶登錄
(async () => {
const browser = await puppeteer.launch({
slowMo: 100, //放慢速度
headless: false,
defaultViewport: {width: 1440, height: 780},
ignoreHTTPSErrors: false, //忽略 https 報(bào)錯(cuò)
args: ['--start-fullscreen'] //全屏打開頁面
});
const page = await browser.newPage();
await page.goto('https://demo.youdata.com');
//輸入賬號密碼
const uniqueIdElement = await page.$('#uniqueId');
await uniqueIdElement.type('admin@admin.com', {delay: 20});
const passwordElement = await page.$('#password', {delay: 20});
await passwordElement.type('123456');
//點(diǎn)擊確定按鈕進(jìn)行登錄
let okButtonElement = await page.$('#btn-ok');
//等待頁面跳轉(zhuǎn)完成，一般點(diǎn)擊某個(gè)按鈕需要跳轉(zhuǎn)時(shí)，都需要等待 page.waitForNavigation() 執(zhí)行完畢才表示跳轉(zhuǎn)成功
await Promise.all([
okButtonElement.click(),
page.waitForNavigation()
]);
console.log('admin 登錄成功');
await page.close();
await browser.close();
})();那么 ElementHandle 都提供了哪些操作元素的函數(shù)呢？
elementHandle.click()：點(diǎn)擊某個(gè)元素
elementHandle.tap()：模擬手指觸摸點(diǎn)擊
elementHandle.focus()：聚焦到某個(gè)元素
elementHandle.hover()：鼠標(biāo) hover 到某個(gè)元素上
elementHandle.type('hello')：在輸入框輸入文本
請求攔截
(async () => {
const browser = await puppeteer.launch();
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 進(jìn)行覆蓋
headers: Object.assign({}, request.headers(), {
'puppeteer-test': 'true'
})
});
}
});
await page.goto('https://demo.youdata.com');
await page.close();
await browser.close();
})();那 page 頁面上都提供了哪些事件呢？
page.on('close') 頁面關(guān)閉
page.on('console') console API 被調(diào)用
page.on('error') 頁面出錯(cuò)
page.on('load') 頁面加載完
page.on('request') 收到請求
page.on('requestfailed') 請求失敗
page.on('requestfinished') 請求成功
page.on('response') 收到響應(yīng)
page.on('workercreated') 創(chuàng)建 webWorker
page.on('workerdestroyed') 銷毀 webWorker
獲取 WebSocket 響應(yīng)
Puppeteer 目前沒有提供原生的用于處理 WebSocket 的 API 接口，但是我們可以通過更底層的 Chrome DevTool Protocol (CDP) 協(xié)議獲得
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//創(chuàng)建 CDP 會(huì)話
let cdpSession = await page.target().createCDPSession();
//開啟網(wǎng)絡(luò)調(diào)試,監(jiān)聽 Chrome DevTools Protocol 中 Network 相關(guān)事件
await cdpSession.send('Network.enable');
//監(jiān)聽 webSocketFrameReceived 事件，獲取對應(yīng)的數(shù)據(jù)
cdpSession.on('Network.webSocketFrameReceived', frame => {
let payloadData = frame.response.payloadData;
if(payloadData.includes('push:query')){
//解析payloadData，拿到服務(wù)端推送的數(shù)據(jù)
let res = JSON.parse(payloadData.match(/\{.*\}/)[0]);
if(res.code !== 200){
console.log(`調(diào)用websocket接口出錯(cuò):code=${res.code},message=${res.message}`);
}else{
console.log('獲取到websocket接口數(shù)據(jù)：', res.result);
}
}
});
await page.goto('https://netease.youdata.163.com/dash/142161/reportExport?pid=700209493');
await page.waitForFunction('window.renderdone', {polling: 20});
await page.close();
await browser.close();
})();
植入 javascript 代碼
Puppeteer 最強(qiáng)大的功能是，你可以在瀏覽器里執(zhí)行任何你想要運(yùn)行的 javascript 代碼，下面是我在爬 188 郵箱的收件箱用戶列表時(shí)，發(fā)現(xiàn)每次打開收件箱再關(guān)掉都會(huì)多處一個(gè) iframe 來，隨著打開收件箱的增多，iframe 增多到瀏覽器卡到無法運(yùn)行，所以我在爬蟲代碼里加了刪除無用 iframe 的腳本：
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://webmail.vip.188.com');
//注冊一個(gè) Node.js 函數(shù)，在瀏覽器里運(yùn)行
await page.exposeFunction('md5', text =>
crypto.createHash('md5').update(text).digest('hex')
);
//通過 page.evaluate 在瀏覽器里執(zhí)行刪除無用的 iframe 代碼
await page.evaluate(async () => {
let iframes = document.getElementsByTagName('iframe');
for(let i = 3; i < iframes.length - 1; i++){
let iframe = iframes[i];
if(iframe.name.includes("frameBody")){
iframe.src = 'about:blank';
try{
iframe.contentWindow.document.write('');
iframe.contentWindow.document.clear();
}catch(e){}
//把iframe從頁面移除
iframe.parentNode.removeChild(iframe);
}
}
//在頁面中調(diào)用 Node.js 環(huán)境中的函數(shù)
const myHash = await window.md5('PUPPETEER');
console.log(`md5 of ${myString} is ${myHash}`);
});
await page.close();
await browser.close();
})();page.evaluate(pageFunction[, ...args])：在瀏覽器環(huán)境中執(zhí)行函數(shù)
page.evaluateHandle(pageFunction[, ...args])：在瀏覽器環(huán)境中執(zhí)行函數(shù)，返回 JsHandle 對象
page.$$eval(selector, pageFunction[, ...args])：把 selector 對應(yīng)的所有元素傳入到函數(shù)并在瀏覽器環(huán)境執(zhí)行
page.$eval(selector, pageFunction[, ...args])：把 selector 對應(yīng)的第一個(gè)元素傳入到函數(shù)在瀏覽器環(huán)境執(zhí)行
page.evaluateOnNewDocument(pageFunction[, ...args])：創(chuàng)建一個(gè)新的 Document 時(shí)在瀏覽器環(huán)境中執(zhí)行，會(huì)在頁面所有腳本執(zhí)行之前執(zhí)行
page.exposeFunction(name, puppeteerFunction)：在 window 對象上注冊一個(gè)函數(shù)，這個(gè)函數(shù)在 Node 環(huán)境中執(zhí)行，有機(jī)會(huì)在瀏覽器環(huán)境中調(diào)用 Node.js 相關(guān)函數(shù)庫
抓取 iframe 中的元素
一個(gè) Frame 包含了一個(gè)執(zhí)行上下文（Execution Context），我們不能跨 Frame 執(zhí)行函數(shù)，一個(gè)頁面中可以有多個(gè) Frame，主要是通過 iframe 標(biāo)簽嵌入的生成的。其中在頁面上的大部分函數(shù)其實(shí)是 page.mainFrame().xx 的一個(gè)簡寫，F(xiàn)rame 是樹狀結(jié)構(gòu)，我們可以通過 frame.childFrames() 遍歷到所有的 Frame，如果想在其它 Frame 中執(zhí)行函數(shù)必須獲取到對應(yīng)的 Frame 才能進(jìn)行相應(yīng)的處理
以下是在登錄 188 郵箱時(shí)，其登錄窗口其實(shí)是嵌入的一個(gè) iframe，以下代碼時(shí)我們在獲取 iframe 并進(jìn)行登錄
(async () => {
const browser = await puppeteer.launch({headless: false, slowMo: 50});
const page = await browser.newPage();
await page.goto('https://www.188.com');
//點(diǎn)擊使用密碼登錄
let passwordLogin = await page.waitForXPath('//*[@id="qcode"]/div/div[2]/a');
await passwordLogin.click();
for (const frame of page.mainFrame().childFrames()){
//根據(jù) url 找到登錄頁面對應(yīng)的 iframe
if (frame.url().includes('passport.188.com')){
await frame.type('.dlemail', 'admin@admin.com');
await frame.type('.dlpwd', '123456');
await Promise.all([
frame.click('#dologin'),
page.waitForNavigation()
]);
break;
}
}
await page.close();
await browser.close();
})();文件的上傳和下載
在自動(dòng)化測試中，經(jīng)常會(huì)遇到對于文件的上傳和下載的需求，那么在 Puppeteer 中如何實(shí)現(xiàn)呢？
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//通過 CDP 會(huì)話設(shè)置下載路徑
const cdp = await page.target().createCDPSession();
await cdp.send('Page.setDownloadBehavior', {
behavior: 'allow', //允許所有下載請求
downloadPath: 'path/to/download' //設(shè)置下載路徑
});
//點(diǎn)擊按鈕觸發(fā)下載
await (await page.waitForSelector('#someButton')).click();
//等待文件出現(xiàn)，輪訓(xùn)判斷文件是否出現(xiàn)
await waitForFile('path/to/download/filename');
//上傳時(shí)對應(yīng)的 inputElement 必須是<input>元素
let inputElement = await page.waitForXPath('//input[@type="file"]');
await inputElement.uploadFile('/path/to/file');
browser.close();
})();
模擬選擇文件
點(diǎn)擊元素觸發(fā)選擇文件框，不會(huì)顯示，直接返回選擇文件
const [fileChooser] = await Promise.all([
page.waitForFileChooser(),
page.click('#mydropzone'), // some button that triggers file selection
]);
await fileChooser.accept(['D:\\down\\tmp.zip']);
跳轉(zhuǎn)新 tab 頁處理
在點(diǎn)擊一個(gè)按鈕跳轉(zhuǎn)到新的 Tab 頁時(shí)會(huì)新開一個(gè)頁面，這個(gè)時(shí)候我們?nèi)绾潍@取改頁面對應(yīng)的 Page 實(shí)例呢？可以通過監(jiān)聽 Browser 上的 targetcreated 事件來實(shí)現(xiàn)，表示有新的頁面創(chuàng)建：
let page = await browser.newPage();
await page.goto(url);
let btn = await page.waitForSelector('#btn');
//在點(diǎn)擊按鈕之前，事先定義一個(gè) Promise，用于返回新 tab 的 Page 對象
const newPagePromise = new Promise(res =>
browser.once('targetcreated',
target => res(target.page())
)
);
await btn.click();
//點(diǎn)擊按鈕后，等待新tab對象
let newPage = await newPagePromise;
模擬不同的設(shè)備
Puppeteer 提供了模擬不同設(shè)備的功能，其中 puppeteer.devices 對象上定義很多設(shè)備的配置信息，這些配置信息主要包含 viewport 和 userAgent，然后通過函數(shù) page.emulate 實(shí)現(xiàn)不同設(shè)備的模擬
const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://www.google.com');
await browser.close();
});
其他信息
官方中文文檔
https://zhaoqize.github.io/puppeteer-api-zh_CN/#/
