這個瀏覽器，想必只有開發者才會用吧？
在數字世界的深處，隱藏著一種不為普通人所知的瀏覽器形態——無頭瀏覽器。對于大多數用戶而言，瀏覽器的存在就是為了瀏覽網頁、獲取信息，而對于開發者來說，瀏覽器則是他們手中的魔法工具，可以用來測試代碼、抓取數據，甚至控制網頁。那么，無頭瀏覽器究竟是什么？它又是如何滿足開發者的需求呢？本文就來一起探索這個看似神秘的瀏覽器。
無頭瀏覽器是什么？
無頭瀏覽器是一種沒有圖形用戶界面（GUI）的網絡瀏覽器。它可以在后臺運行，并通過編程接口進行控制和操作，而不需要顯示界面。通常，傳統的瀏覽器如 Chrome、Firefox 和 Safari 都具有圖形用戶界面，但這些瀏覽器也提供了無頭模式的選項。
無頭瀏覽器提供了對瀏覽器引擎的完全控制，可以執行網頁的加載、渲染和交互操作，并提供了對 DOM 的訪問和操作。通過編程接口，開發人員可以使用無頭瀏覽器來模擬用戶行為，填寫表單、點擊按鈕、觸發事件等，以便進行自動化測試或數據采集等。
無頭瀏覽器的優勢在于它可以在后臺運行，無需顯示瀏覽器窗口，這樣可以節省系統資源，并且可以在服務器上進行批量處理和并發操作。常見的無頭瀏覽器包括 Puppeteer、Selenium WebDriver（使用Headless模式）、PhantomJS 等。其中：
- PhantomJS，又被稱為“無頭瀏覽器之父”，已經停止維護。
- Puppeteer 是 Google Chrome 團隊開發的一款 Node 庫，它提供了一個高級API，用于通過 Node.js控制Chrome或Chromium。Puppeteer 提供了很多有用的功能，如打開頁面、生成PDF、等待頁面加載、處理 JavaScript 異步操作等。
雖然無頭瀏覽器具有許多優勢，但也有一些限制需要注意：
- 用戶交互模擬有限：由于無頭瀏覽器不渲染圖形界面，它們可能無法完全模擬用戶的鼠標移動、滾動或復雜的觸摸手勢等交互。這可能會導致在測試依賴這些交互的網頁應用程序的某些方面時出現困難。
- 瀏覽器特定行為：無頭瀏覽器可能無法完全模仿您要測試的目標瀏覽器的特定行為。這可能導致誤報或漏報，并且可能需要在實際瀏覽器中進行額外的測試以確保兼容性。
- 響應式設計測試不足：在測試響應式網頁設計時，無頭瀏覽器可能無法準確模擬不同設備或屏幕尺寸的行為。因此，仍然需要在真實設備上測試應用，以確保在各個平臺上提供一致的用戶體驗。
- 驗證碼和機器人保護挑戰：許多網站使用驗證碼或其他機器人保護機制來防止機器人或爬蟲的自動訪問。無頭瀏覽器可能難以繞過這些保護措施，使得執行某些任務（如網頁抓取）變得困難。
到這里，相信你對無頭瀏覽器已經有了一定的了解，下面就來通過 Puppeteer 來看看無頭瀏覽器的使用案例吧。
Puppeteer 是什么？
Puppeteer 是一個基于 Chrome DevTools 協議的 Node.js 庫，提供了對無頭 Chrome 或 Chrome 瀏覽器的控制。它廣泛應用于開發領域，以下是一些 Puppeteer 在開發中的應用場景的例資：
- 自動化測試：可以模擬用戶在瀏覽器中的行為，如點擊按鈕、填寫表單、觸發事件等，因此在自動化測試中非常有用。
- 網頁截圖和PDF生成：可以加載網頁并生成截圖或PDF文件。這在需要生成頁面快照、生成報告或進行網頁內容的可視化檢查時非常有用。
- 網頁爬蟲和數據采集：可以模擬用戶在瀏覽器中的行為，因此可以用于構建網絡爬蟲和數據采集工具。
- 性能分析和優化：可以用于測量和分析網頁的性能指標，如加載時間、資源使用情況等。
- UI交互測試：可以使用Puppeteer模擬用戶與網頁的交互，檢查UI元素的可見性、位置和樣式等，以確保頁面在不同場景下的正確顯示和交互。
Puppeteer API 可用于截取屏幕截圖、創建 PDF、導航頁面以及從頁面獲取信息等。
Puppeteer 怎么用？
下面來使用 Puppeteer 進行屏幕截圖、創建PDF、自動化操作。
首先，在終端中執行以下命令來安裝 puppeteer：
npm i puppeteer屏幕截圖
接下來，創建一個 JavaScript 文件，將其命名為 puppeteer.js，在其中添加以下代碼：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.yuque.com/cuggz');
await page.screenshot({path: '前端充電寶.png'});
browser.close();
})();這段代碼很簡單，大概流程如下：
- 引入Puppeteer庫：第一行引入了 Puppeteer
- 啟動瀏覽器：通過調用puppeteer.launch()方法來啟動一個無頭瀏覽器實例。這將返回一個Browser對象，代表了一個瀏覽器實例。
- 創建頁面：通過調用browser.newPage()方法來創建一個新的頁面。這將返回一個Page對象，代表了一個網頁。
- 打開網頁：使用page.goto()方法打開指定的URL，瀏覽器將加載該網頁。
- 截圖：使用page.screenshot()方法對當前頁面進行截圖，并將截圖保存到指定的路徑。
- 關閉瀏覽器：通過調用browser.close()方法來關閉瀏覽器實例，釋放資源。
可以通過設置 fullPage: true 來實現全屏幕截圖：
await page.screenshot({ path: 'cuggz.png', fullPage: true})這樣，屏幕截圖就完成了。
生成 PDF
接下來使用 Puppeteer 將頁面生成一個 PDF。先創建一個 puppeteerpdf.js文件，在文件中添加以下代碼：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.yuque.com/cuggz', {waitUntil: 'networkidle'});
await page.pdf({path: '前端充電寶.pdf', format: 'A4'});
browser.close();
})();這段代碼和上面的例子差不多。這里的 waitUntil: 'networkidle' 表示僅當網絡活動保持“空閑”狀態至少達到 networkIdleTimeout 毫秒（默認為 1000 毫秒）時，才認為站點導航已完成，然后才會執行 PDF 生成操作。
自動化操作
下面來使用 Puppeteer 進行頁面導航、自動化表單提交和鍵盤輸入，并顯示表單提交結果。
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com', {waitUntil: 'networkidle'});
// 在搜索欄中輸入查詢
await page.type('前端充電寶');
await page.click('input[type="submit"]');
// 等待結果顯示
await page.waitForSelector('h3 a');
// 從頁面中提取結果
const links = await page.evaluate(() => {
const anchors = Array.from(document.querySelectorAll('h3 a'));
return anchors.map(anchor => anchor.textContent);
});
console.log(links.join('\n'));
browser.close();
})();這里使用 page.type() 函數定義要鍵入的查詢，并使用 page.click() 函數模擬單擊。page.waitForSelector() 函數用于等待選擇器檢查是否加載了所需的內容。
page.evaluate() 函數允許在頁面上下文中運行腳本。上面的函數從 Google 搜索結果中獲取所有鏈接并將它們存儲在一個數組中。
