使用 headless chrome進行測試

---

注:文章聚合瞭如今 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版支持的特性，所有能夠利用：
ES2017
ServiceWork(PWA測試隨便耍)
無沙盒環境
無痛通信&API調用
無與倫比的速度
...

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

如今有兩個方式獲取支持 headless 的 chrome
1.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

這是一個很是棒的方式去查看加載了那些資源.
參考連接:https://github.com/yesvods/Bl...
ubuntu 系統下能夠參考:https://medium.com/@dschnr/us...

利用 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

最後 print 出登陸成功的當前 url: http://demo.testfire.net/bank...

利用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()

參考文檔:http://tobyho.com/2015/01/09/...