Puppeteer筆記（一）：Puppeteer簡介

Puppeteer筆記（一）：Puppeteer簡介

一、Puppeteer簡介

　　Puppeteer是NPM庫，它提供了NodeJS進階API來控制Chrome。Puppeteer 預設以無頭（***面）方式運作，但也可以配置為運作有界面的Chrome。

　　Puppeteer 提供了一系列 API，通過 Chrome DevTools Protocol 協定控制 Chromium/Chrome 浏覽器的行為

二、什麼是Headless Chrome

　　（1）在***面的環境中運作 Chrome

　　（2）通過指令行或者程式語言操作 Chrome

　　（3）無需人的幹預，運作更穩定

　　（4）在啟動 Chrome 時添加參數 --headless，便可以 headless 模式啟動 Chrome

三、Puppeteer 結構

　　API分層結構，反映了浏覽器結構

• Puppeteer： 使用DevTools協定與浏覽器進行通信
• Browser：對應一個浏覽器執行個體，一個 Browser 可以包含多個 BrowserContext、
• BrowserContext： 對應浏覽器一個上下文會話，就像我們打開一個普通的 Chrome 之後又打開一個隐身模式的浏覽器一樣，BrowserContext 具有獨立的 Session(cookie 和 cache 獨立不共享)，一個 BrowserContext 可以包含多個 Page
• Page：表示一個 Tab 頁面，通過 browserContext.newPage()/browser.newPage() 建立，browser.newPage() 建立頁面時會使用預設的 BrowserContext，一個 Page 可以包含多個 Frame
• Frame: 一個架構，每個頁面有一個主架構（page.MainFrame()）,也可以多個子架構，主要由 iframe 标簽建立産生的
• ExecutionContext： 是 javascript 的執行環境，每一個 Frame 都一個預設的 javascript 執行環境
• ElementHandle: 對應 DOM 的一個元素節點，通過該該執行個體可以實作對元素的點選，填寫表單等行為，我們可以通過選擇器，xPath 等來擷取對應的元素

四、Puppeteer 用途

• 網頁截圖或者生成 PDF
• 自動送出表單，進行 UI 測試，鍵盤輸入等。
• 建立一個時時更新的自動化測試環境。 使用最新的 JavaScript 和浏覽器功能直接在最新版本的Chrome中執行測試。
• 捕獲網站的時間線，幫助診斷性能問題
• 網絡爬蟲
• ......