Chrome59(linux、macos)、 Chrome60(windows)以後,Chrome自帶headless(無界面)模式很方便作自動化測試或者爬蟲。可是如何和headless模式的Chrome交互則是一個問題。經過啓動Chrome時的命令行參數僅能實現簡易的啓動時初始化操做。Selenium、Webdriver等是一種解決方案,可是每每依賴衆多,不夠扁平。node
Puppeteer是谷歌官方出品的一個經過DevTools協議控制headless Chrome的Node庫。能夠經過Puppeteer的提供的api直接控制Chrome模擬大部分用戶操做來進行UI Test或者做爲爬蟲訪問頁面來收集數據。linux
Puppeteer自己依賴6.4以上的Node,可是爲了異步超級好用的async/await,推薦使用7.6版本以上的Node。另外headless Chrome自己對服務器依賴的庫的版本要求比較高,centos服務器依賴偏穩定,v6很難使用headless Chrome,提高依賴版本可能出現各類服務器問題(包括且不限於沒法使用ssh),最好使用高版本服務器。git
Puppeteer由於是一個npm的包,因此安裝很簡單:es6
npm i puppeteergithub
或者web
yarn add puppeteerchrome
Puppeteer安裝時自帶一個最新版本的Chromium,能夠經過設置環境變量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳過下載。若是不下載的話,啓動時能夠經過puppeteer.launch([options])配置項中的executablePath指定Chromium的位置。macos
Puppeteer相似其餘框架,經過操做Browser實例來操做瀏覽器做出相應的反應。npm
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://rennaiqian.com');
await page.screenshot({path: 'example.png'});
await page.pdf({path: 'example.pdf', format: 'A4'});
await browser.close();
})();
複製代碼
上述代碼經過puppeteer的launch方法生成了一個browser的實例,對應於瀏覽器,launch方法能夠傳入配置項,比較有用的是在本地調試時傳入{headless:false}能夠關閉headless模式。windows
const browser = await puppeteer.launch({headless:false})
複製代碼
browser.newPage方法能夠打開一個新選項卡並返回選項卡的實例page,經過page上的各類方法能夠對頁面進行經常使用操做。上述代碼就進行了截屏和打印pdf的操做。
一個很強大的方法是page.evaluate(pageFunction, ...args),能夠向頁面注入咱們的函數,這樣就有了無限可能
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://rennaiqian.com');
// Get the "viewport" of the page, as reported by the page.
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
deviceScaleFactor: window.devicePixelRatio
};
});
console.log('Dimensions:', dimensions);
await browser.close();
})();
複製代碼
須要注意的是evaluate方法中是沒法直接使用外部的變量的,須要做爲參數傳入,想要得到執行的結果也須要return出來。由於是一個開源一個多月的項目,如今項目很活躍,因此使用時自行查找api才能保證參數、使用方法不會錯。
const browser = await puppeteer.launch({headless: false})
複製代碼
const browser = await puppeteer.launch({
headless:false,
slowMo:250
});
複製代碼
3.捕獲console的輸出,經過監聽console事件。在page.evaluate裏調試代碼時這也很方便:
page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
await page.evaluate(() => console.log(`url is ${location.href}`));
複製代碼
4.啓動詳細日誌記錄,全部公共API調用和內部協議流量都將經過puppeteer命名空間下的debug模塊進行記錄
# Basic verbose logging
env DEBUG="puppeteer:*" node script.js
# Debug output can be enabled/disabled by namespace
env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls
# Protocol traffic can be rather noisy. This example filters out all Network domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'
複製代碼
不少網頁經過user-agent來判斷設備,能夠經過page.emulate(options)來進行模擬。options有兩個配置項,一個爲userAgent,另外一個爲viewport能夠設置寬度(width)、高度(height)、屏幕縮放(deviceScaleFactor)、是不是移動端(isMobile)、有無touch事件(hasTouch)。
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://www.example.com');
// other actions...
await browser.close();
});
複製代碼
上述代碼則模擬了iPhone6訪問某網站,其中devices是puppeteer內置的一些常見設備的模擬參數。
不少網頁須要登陸,有兩種解決方案:
讓puppeteer去輸入帳號密碼 經常使用方法:點擊能夠使用page.click(selector[, options])方法,也能夠選擇聚焦page.focus(selector)。 輸入能夠使用page.type(selector, text[, options])輸入指定的字符串,還能夠在options中設置delay緩慢輸入更像真人一些。也能夠使用keyboard.down(key[, options])來一個字符一個字符的輸入。
若是是經過cookie判斷登陸狀態的能夠經過page.setCookie(...cookies),想要維持cookie能夠定時訪問。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://baidu.com');
await page.type('#kw', 'puppeteer', {delay: 100});
page.click('#su')
await page.waitFor(1000);
const targetLink = await page.evaluate(() => {
return [...document.querySelectorAll('.result a')].filter(item => {
return item.innerText && item.innerText.includes('Puppeteer的入門和實踐')
}).toString()
});
await page.goto(targetLink);
await page.waitFor(1000);
browser.close();
})()
複製代碼
歡迎訪問個人博客