Puppeteer是Chrome團隊開源的Node庫,其提供基於DevTools協議的高階API讓開發人員可以控制Headless Chrome、Chromium、Chrome等瀏覽器javascript
經過Puppeteer可以將平時手動使用瀏覽器的操做經過代碼的方式自動化執行,例如抓取網頁、填充表單、下載文件、自動化測試,甚至使用開發者工具等。css
Node v6.4.0,但建議使用v7.6.0以上,緣由是Puppeteer的不少用法都是異步的,原生支持async/await顯得比較友好。html
npm i --save puppeteer
使用Puppeteer的流程比較簡單,有點相似咱們使用瀏覽器的流程,按照你操做瀏覽器的過程獲得信息的過程,一步步執行對應的代碼:java
const puppeteer = require('puppeteer'); // 引用 async function open(url) { let browser = await puppeteer.launch({ headless: true, executablePath: '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary' }); // 建立browser實例,至關於打開瀏覽器 let page = await browser.newPage(); // 打開頁面,至關於打開標籤頁 await page.goto(url, { waitUnil: 'networkidle0' }); // 跳轉到指定url /* 這裏能夠針對頁面進行不少操做 */ browser.close(); // 關閉瀏覽器 } open('www.taobao.com');
下圖是官方結構圖chrome
經過css selector寫法獲取單個對象,返回<Promise<?ElementHandle>>shell
與Page.$(selector) 相似,但返回的是一組對象,<Promise<Array<ElementHandle>>>npm
獲取屬性json
const divsCounts = await page.$$eval('div', divs => divs.length);
執行頁面腳本瀏覽器
等待指定Dom顯示、等待方法執行、等待一段時間app
等待頁面跳轉
抓取1688的某商品詳情頁內容,咱們須要事先分析該頁面的結構,以便可以抓取所需的信息。
商品名稱 | class="d-title" dom |
商品信息 | 全局inline js iDetailConfig對象 |
商品縮略圖 | 全局inline js iDetailData對象 |
商品詳情圖 | id="desc-lazyload-container" dom裏面全部img,使用了lazy-load |
具體看下面的關鍵代碼
let detailUrl = 'https://detail.1688.com/offer/564492877842.html'; /** * 抓取詳情頁 * @param {Object} page */ async function fetchDetail(page) { // 獲取商品名稱 let dTitleHandle = await page.$('.d-title'); // 使用css selector格式查找商品名稱,返回 let dTitle = await page.evaluate(dTitle => dTitle.innerHTML, dTitleHandle); // 獲取dom innerHTML let iDetailConfig = await page.evaluate(x => { return Promise.resolve(iDetailConfig); }); // 獲取頁面js iDetailConfig對象 let iDetailData = await page.evaluate(x => { return Promise.resolve(iDetailData); }); // 獲取頁面js iDetailData對象 let detail = { title: dTitle, offerid: iDetailConfig.offerid, skuProps: iDetailData.sku.skuProps, skuMap: iDetailData.sku.skuMap }; /** * …… */ // 獲取sku圖片和縮略圖 Object.keys(detail.skuMap).forEach(async (skuName) => { let selectorStr = `tr[data-sku-config] span.image[title=${skuName}]`; // 遍歷sku信息查找對應的縮略圖標籤,讀取data-imgs屬性的json,從其中獲取縮略圖和原圖url let dataImgsValue = page.evaluate(selectorStr => { return document.querySelector(selectorStr).dataset.imgs; }, selectorStr); let dataImgs = JSON.parse(await dataImgsValue); // 調用第三方庫下載圖片 await saveImgs(dataImgs.preview, `${dir}/preview`); await saveImgs(dataImgs.original, `${dir}/original`); }); // 加載詳情圖 let preScrollHeight = 0; let scrollHeight = -1; while(preScrollHeight !== scrollHeight) { // 詳情信息是根據滾動異步加載,因此須要讓頁面滾動到屏幕最下方,經過延遲等待的方式進行屢次滾動 let scrollH1 = await page.evaluate(async () => { let h1 = document.body.scrollHeight; window.scrollTo(0, h1); return h1; }); await page.waitFor(500); let scrollH2 = await page.evaluate(async () => { return document.body.scrollHeight; }); let scrollResult = [scrollH1, scrollH2]; preScrollHeight = scrollResult[0]; scrollHeight = scrollResult[1]; } let descContainerHandle = await page.$('#desc-lazyload-container'); let descImgs = await page.evaluate(descContainer => { let descImgs = []; descContainer.querySelectorAll('img').forEach(imgElement => { // 遍歷保存全部的詳情頁圖片 descImgs.push({ src: imgElement.src }) }); return descImgs; }, descContainerHandle); }
除了基本的頁面瀏覽功能,Puppeteer一樣可以調用devtool的功能,其中就包括Trace,可以自動保存網頁瀏覽的trace文件,可以成爲分析性能的輔助工具。
async function trace(url) { /** * ……… */ // 頁面的trace數據會被保存到trace.json await page.tracing.start({path: './dist/trace.json'}); await page.goto(url, { waitUnil: 'networkidle0' }); await page.tracing.stop(); }
保存下來的json文件能夠經過chrome devtool加載手動分析,也能夠經過程序方式提取關鍵信息進行自動分析,如頁面加載速度、頁面展示截圖、腳本執行性能等,這個功能在自動化監控方面會有很大的想象空間。
Puppeteer的出現提高了開發、測試對瀏覽器的自動化控制能力,其性能、API友好度、兼容性都遠遠超過PhantomJS,對於使用者來講,須要更多地思考如何更好地利用工具的能力,例如爬蟲的難點並不在於爬蟲工具,而是如何更有效率地抓取數據、反爬,獲取Trace後的分析一樣纔是技術難點。