前言：

最近在做webUI的自動化，當本地執行指令碼時，會啟動瀏覽器的UI介面，導致其他工作無法進行。並且當電腦鎖屏時，chromer driver 會退出，無法繼續執行。查網上的資料，headerless Browser模式可以在後臺執行瀏覽器。

1、Headerless Browser是什麼鬼？

Headerless Browser（無頭的瀏覽器）是瀏覽器的無介面狀態，可以在不開啟瀏覽器GUI的情況下，使用瀏覽器支援的效能。

Chrome Headless相比於其他的瀏覽器，可以更便捷的執行web自動化，編寫爬蟲、截圖等。通常是由程式設計或者命令列來控制的。

好處：

可以加快UI自動化測試的執行時間，對於UI自動化測試，少了真實瀏覽器載入css，js以及渲染頁面的工作。無頭測試要比真實瀏覽器快的多。

可以在無介面的伺服器或CI上執行測試，減少了外界的干擾，使自動化測試更穩定。

2、命令列模式執行

我本地的環境：

• 系統：mac
• chrome瀏覽器版本：

命令列啟動chrome：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --remote-debugging-port=9222 https://www.baidu.com

引數說明：

• --headless：無頭模式，就是無介面模式執行
• --remote-debugging-port：開啟遠端除錯，埠9222和我們之前轉發出來的埠一致
• --user-data-dir：設定獨立的檔案儲存目錄，建議一個網站一個目錄
• --crash-dumps-dir：設定的crash檔案儲存目錄

　　如果沒有指定crash-dumps-dir可能會報錯。

　　ERROR:xattr.cc(64)] setxattr org.chromium.crashpad.database.initialized on file /var/folders/gx/1m0t1z_d03dg4pjhv7bwwt_c0000gp/T/: Operation not permitted (1)

加上crash-dumps-dir引數，命令如下：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --headless --crash-dumps-dir=/Users/work/baidu http://www.baidu.com/

驗證是否成功開啟headless chrome 的服務：

　　隨意開啟一個瀏覽器視窗，輸入http://localhost:9222，如果看到如下效果，就說明成功開啟。

3、連線遠端埠

如果是本機除錯，直接開啟：http://localhost:9222/json，效果如下圖所示：

開啟http://localhost:9222/json可以看到有一個devtoolsFrontendUrl，那就是開發者工具的前端地址，就是一個html應用，url裡面傳過去WebSocket除錯地址。開啟這個地址就可以看到熟悉的開發者工具了！注意：這個視窗除錯的是遠端chrome上的頁面。

其他的一些已知介面：

• http://127.0.0.1:9222/json：檢視已經開啟的Tab列表
• http://127.0.0.1:9222/json/version: 檢視瀏覽器版本資訊
• http://127.0.0.1:9222/json/new?http://www.baidu.com: 新開Tab開啟指定地址

4、截圖

截圖命令：--screenshot命令

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --headless --crash-dumps-dir=/Users/work/baidu --screenshot http://www.baidu.com/

使用--screenshot命令會在當前工作目錄中儲存截圖為screenshot.png