注:文章聚合了現在 headless chrome 介紹和使用方式

包含了三個部分

1. chrome 在 mac 上的安裝和簡單使用(來自官方)

2. 利用 selenium 的 webdrive 驅動 headless chrome(自己新增)

3. 利用Xvfb方式實現偽 headless chrome

概念

Headless模式解決了什麼問題: 自動化工具例如 selenium 利用有頭瀏覽器進行測試,面臨效率和穩定性的影響,所以出現了 Headless Browser, 3年前，無頭瀏覽器 PhantomJS 已經如火如荼出現了，緊跟著 NightmareJS 也成為一名巨星。無頭瀏覽器帶來巨大便利性：頁面爬蟲、自動化測試、WebAutomation...用過PhantomJS的都知道，它的環境是執行在一個封閉的沙盒裡面，在環境內外完全不可通訊，包括API、變數、全域性方法呼叫等。

So, Chrome59 推出了 headless mode，Chrome59版支援的特性，全部可以利用：ES2017ServiceWork(PWA測試隨便耍)無沙盒環境無痛通訊&API呼叫無與倫比的速度...

chrome59 在 mac 上的安裝和簡單使用

現在有兩個方式獲取支援 headless 的 chrome1.chrome 59 beta 版本:下載連結https://dl.google.com/chrome/...2.安裝安裝黃金版 chrome,Chrome Canary :獲取方式:

brew install Caskroom/versions/google-chrome-canary

3.簡單的使用,我就以 chrome 59,演示一下:

用一個命令啟動 Chrome 作為一個 Headless 服務:
./Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --remote-debugging-port=9222 --disable-gpu http://demo.testfire.net
   
或者切到google chrome 這個程式目錄下
cd /Applications/Google Chrome.app/Contents/MacOS
然後執行
./Google\ Chrome  --headless --remote-debugging-port=9222
 
 --disable-gpu http://demo.testfire.net

使用 Headless Chrome 抓取資料:

將要使用 Node.js 去連線我們執行中的 Chrome 例項。你需要確保你已經安裝了 Node，才可以繼續這個步驟。
讓我們生成一個普通的 Node 專案，只有一個依賴那就是 Chrome Remote Interface 包，它可以幫助我們與 Chrome 溝通。然後我們建立一個空白的 index.js 檔案。

mkdir my-headless-chrome && cd my-headless-chrome
npm init --yes
npm install --save chrome-remote-interface 
touch index.js

現在我們將要放一些程式碼到index.js。這個模板例子是由 Chrome 團隊提供的。它指示這個瀏覽器導航到github.com，然後通過 client 裡的 Network 屬性捕獲這個頁面上所有的網路請求。

vi index.js
將程式碼複製到裡面:
const CDP = require("chrome-remote-interface");

CDP(client => {
  // extract domains
  const { Network, Page } = client;
  // setup handlers
  Network.requestWillBeSent(params => {
    console.log(params.request.url);
  });
  Page.loadEventFired(() => {
    client.close();
  });
  // enable events then start!
  Promise.all([Network.enable(), Page.enable()])
    .then(() => {
      return Page.navigate({ url: "https://github.com" });
    })
    .catch(err => {
      console.error(err);
      client.close();
    });
}).on("error", err => {
  // cannot connect to the remote endpoint
  console.error(err);
});

最後啟動我們的 Node 應用。
node index.js
我們可以看到 Chrome 發出的所有的網路請求，然而並沒有一個實際的瀏覽器視窗。

$ node index.js
http://demo.testfire.net/
http://demo.testfire.net/style.css
http://demo.testfire.net/images/logo.gif
http://demo.testfire.net/images/header_pic.jpg
http://demo.testfire.net/images/pf_lock.gif
http://demo.testfire.net/images/gradient.jpg
http://demo.testfire.net/images/home1.jpg
http://demo.testfire.net/images/home2.jpg
http://demo.testfire.net/images/home3.jpg

利用 selenium 的 webdrive 驅動 headless chrome

鑑於以上的方式是利用 nodejs直接去操作 headless chrome

我提供一種方式,利用 selenium 的 webdrive 的 chromedriver驅動 chrome59進行 headless chrome 操作
利用 webdrive 的webdriver.ChromeOptions()方法,新增 headless 相關引數,從而驅動 headless的 chrome 
下面的程式碼是進行一個 web 登入的過程:

#coding:utf-8
from selenium import webdriver

url = "http://demo.testfire.net"
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
driver = webdriver.Chrome(chrome_options=chrome_options,executable_path='/Users/xxxx/driver/chromedriver')

driver.get('http://demo.testfire.net')
driver.find_element_by_xpath('//*[@id="_ctl0__ctl0_LoginLink"]').click()
driver.find_element_by_xpath('//*[@id="uid"]').clear()
driver.find_element_by_xpath('//*[@id="uid"]').send_keys('admin')
driver.find_element_by_xpath('//*[@id="passw"]').send_keys('admin')
driver.find_element_by_xpath('//*[@id="login"]/table/tbody/tr[3]/td[2]/input').click()

print driver.current_url

利用Xvfb方式實現偽 headless chrome

當瀏覽器不支援headless模式,可以利用python 的Xvfb實現偽 headless mode,Xvfb只是產生了一個虛擬視窗,瀏覽器只是沒有在當前視窗顯示.

簡單的列舉利用指令碼

#coding:utf-8
from selenium import webdriver
from xvfbwrapper import Xvfb

xvfb = Xvfb(width=1280,height=720)
xvfb.start()
driver = webdriver.Chrome()
driver.get('http://demo.testfire.net')
cookies = driver.get_cookies()
print cookies
driver.close()
xvfb.stop()