2019獨角獸企業重金招聘Python工程師標準>>>

什么是 Headless Chrome

Headless Chrome 是 Chrome 瀏覽器的無界面形態，可以在不打開瀏覽器的前提下，使用所有 Chrome 支持的特性運行你的程序。相比于現代瀏覽器，Headless Chrome 更加方便測試 web 應用，獲得網站的截圖，做爬蟲抓取信息等。相比于出道較早的 PhantomJS，SlimerJS 等，Headless Chrome 則更加貼近瀏覽器環境。

如何獲取 Headless Chrome

目前，Mac 上?Chrome 59 beta?版本與 Linux 上的 Chrome 57+ 已經開始支持 headless 特性。Windows 上 Chrome 暫時不支持，可以使用?Chrome Canary 60?進行開發。

如何在終端中使用

在Mac上使用前，建議先綁定 Chrome 的別名

alias google-chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome" Linux下無需綁定別名，從官網上下載最新版 Chrome 之后直接運行以下命令即可。

然后，在終端中輸入：

google-chrome --headless --disable-gpu --remote-debugging-port=9222 https://github.com 增加 --disable-gpu 主要是為了屏蔽現階段可能觸發的錯誤。

此時，Headless Chrome已經成功運行了。打開瀏覽器，輸入?http://localhost:9222，你會看到如下的界面：

在終端中，我們還可以做以下操作：

獲取屏幕截圖：

google-chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://github.com

獲取頁面為PDF：

google-chrome --headless --disable-gpu --print-to-pdf https://github.com

打印頁面DOM：

google-chrome --headless --disable-gpu --dump-dom https://github.com/

遠程控制

在上文中講述的都使用終端命令啟動 Headless Chrome，下文以獲取截圖為例，嘗試如何在程序里控制 Headless Chrome。

安裝依賴

npm install lighthouse chrome-remote-interface --save

實現截圖的大體思路為：通過使用 lighthouse 啟動 Headless Chrome，然后通過?chrome-remote-interface?遠程控制瀏覽器，使用 Page 監控頁面的加載，使用 Emulation 模塊調整視口縮放，最終生成一張截圖。

const { ChromeLauncher } = require('lighthouse/lighthouse-cli/chrome-launcher') const chrome = require('chrome-remote-interface') const fs = require('fs') const deviceMetrics = {width: 1200,height: 800,deviceScaleFactor: 0,mobile: false,fitWindow: false } const screenshotMetrics = {width: deviceMetrics.width,height: deviceMetrics.height } let protocol let launcherfunction launchChrome () {const launcher = new ChromeLauncher({port: 9222,autoSelectChrome: true,additionalFlags: ['--window-size=412,732', '--disable-gpu', '--headless']})return launcher.run().then(() => launcher) } function getScreenShot () {const { Page, Emulation } = protocolreturn Page.enable().then(() => {Emulation.setDeviceMetricsOverride(deviceMetrics) // 配置瀏覽器尺寸Emulation.setVisibleSize(screenshotMetrics) // 配置截圖尺寸Page.navigate({ url: 'https://github.com/' })return new Promise((resolve, reject) => {Page.loadEventFired(() => {resolve(Page.captureScreenshot({ format: 'jpeg', fromSurface: true }))})})}).then(image => {const buffer = new Buffer(image.data, 'base64')return new Promise((resolve, reject) => {fs.writeFile('output.jpeg', buffer, 'base64', err => {if (err) return reject(err)resolve()})})}) } launchChrome().then(Launcher => {launcher = Launcherreturn new Promise((resolve, reject) =>{chrome(Protocol => {protocol = Protocolresolve()}).on('error', err => { reject(err) })})}).then(getScreenShot).then(() => {protocol.close()launcher.kill()}).catch(console.error) 這里使用 lighthouse 提供的 ChromeLauncher 模塊來調用 Chrome，如果電腦上安裝了Chrome Canary，lighthouse 默認會啟動 Chrome Canary，可以將 autoSelectChrome 設置為false 然后自行選擇使用什么版本。

通過 chrome-remote-interface 配合 Headless Chrome，我們還可以做更多事情。

使用 CSS 和 DOM 模塊，可以獲取和設置頁面中的 DOM 節點內容和 CSS 樣式。

function getStyle () {const { Page, CSS, DOM } = protocolreturn Promise.all([DOM.enable(),CSS.enable(),Page.enable()]).then(() => {Page.navigate({ url: 'https://github.com/' })return new Promise((resolve, _) => {Page.loadEventFired(() => { resolve(DOM.getDocument()) })})}).then(res => res.root.nodeId).then(nodeId => DOM.querySelector({ selector: '.btn-primary', nodeId })).then(({ nodeId }) => CSS.getComputedStyleForNode({ nodeId })).then(style => { console.log(style) }) }

使用 Runtime 模塊，可以在頁面運行時執行 JS 腳本。

function search () {const { Page, Runtime } = protocolreturn Promise.all([Page.enable()]).then(() => {Page.navigate({ url: 'https://www.baidu.com/' })return new Promise((resolve, _) => {Page.loadEventFired(() => { resolve() })})}).then(() => {const code = ['var input = document.querySelector(\'.s_ipt\')','var btn = document.querySelector(\'#su\')','input.value=\'123\''].join(';')return Runtime.evaluate({ expression: code })}).then(() => {return new Promise((resolve, _) => {setTimeout(() => {resolve(Page.captureScreenshot({ format: 'jpeg', fromSurface: true }))}, 3000)})}).then(image => {const buffer = new Buffer(image.data, 'base64')return new Promise((resolve, reject) => {fs.writeFile('output.jpeg', buffer, 'base64', err => {if (err) return reject(err)resolve()})})}) }

使用 Network 模塊，可以讀取并設置 UserAgent 和 Cookie 等信息。

function setUAandCookie () {const { Page, Network } = protocolreturn Promise.all([Network.enable(),Page.enable()]).then(() => {const userAgent = Network.setUserAgentOverride({ userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.71 Safari/537.36" })Network.setCookie({url: 'https://github.com',name: 'test',value: '123',domain: '.github.com',path: '/',httpOnly: true})Page.navigate({ url: 'https://github.com/' })return new Promise((resolve, _) => {Page.loadEventFired(() => { resolve() })})}).then(() => {return Network.getCookies()}).then(console.log) }

在 Karma 中使用 Headless Chrome 進行單元測試

相比于 PhantomJS 等，使用 Headless Chrome 做單元測試更加貼近瀏覽器開發環境。同時 PhantomJS 作者也已經功成身退，在 Chrome 發布 Headless 模式后，發布通知不再維護 PhantomJS 項目。

安裝依賴

npm install jasmine-core karma karma-chrome-launcher karma-jasmine -D

配置 Karma

// karma.conf.js module.exports = function (config) {config.set({frameworks: ['jasmine'],files: ['./test.js'],browsers: ["Chrome_Beta_Headless"],customLaunchers: {Chrome_Beta_Headless: {base: 'Chrome',flags: ['--headless','--disable-gpu','--remote-debugging-port=9222']}},browserConsoleLogOptions: {level: 'log',terminal: true},reporters: ['progress'],autoWatch: false,singleRun: true}) }

編寫測試用例

// test.js describe('test', function() {it('should be true', function() {console.log(window.navigator.userAgent)expect(true).toEqual(true);}); });

配置npm script

// package.json ... scripts: {test: "karma start" } ...

在終端中運行

npm test

結果

從返回結果中可以看出，測試已運行在 Headless Chrome 環境下。

小結

本文簡單介紹了一下 Headless Chrome 在終端的用法，以及如何使用 Headless Chrome 獲取截圖、獲取頁面中的CSS和DOM、設置UA和Cookie、運行JS腳本、配合 Karma 進行單元測試。接下來，就等著你探索更多關于 Headless Chrome 的用法了...

參考：

https://developers.google.com/web/updates/2017/04/headless-chrome
How to install and use Headless Chrome on OSX

轉載于:https://my.oschina.net/wanjubang/blog/913457

總結

以上是生活随笔為你收集整理的初探 Headless Chrome的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。