Puppeteer筆記（一）：Puppeteer簡介

Puppeteer系列

1、Puppeteer筆記（一）：Puppeteer簡介

2、Puppeteer筆記（二）：Puppeteer安裝及實例Demo

3、Puppeteer筆記（三）：Puppeteer獲取元素及元素屬性 

4、Puppeteer筆記（四）：Puppeteer模擬鍵盤 

5、Puppeteer筆記（五）：Puppeteer文件上傳 

6、Puppeteer筆記（六）：Puppeteer切換frame操作 

7、Puppeteer筆記（七）：Puppeteer切換瀏覽器TAB頁 

8、Puppeteer筆記（八）：Puppeteer執行自定義Javascript方法 

一、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中執行測試。
• 捕獲網站的時間線，幫助診斷性能問題
• 網絡爬蟲
• ......