使用 headless chrome進行測試

ephererid 發布于2019-07-31 10:56 / 960人閱讀

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

包含了三個部分

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

利用 selenium 的 webdrive 驅動 headless chrome(自己添加)

利用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("http://*[@id="_ctl0__ctl0_LoginLink"]").click()
driver.find_element_by_xpath("http://*[@id="uid"]").clear()
driver.find_element_by_xpath("http://*[@id="uid"]").send_keys("admin")
driver.find_element_by_xpath("http://*[@id="passw"]").send_keys("admin")
driver.find_element_by_xpath("http://*[@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/...

云服務器 GPU云服務器 chrome webrtc 測試進行測試 java進行接口測試 Headless

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/44368.html

使用 Headless Chrome 進行自動化測試

摘要：安裝安裝依賴庫安裝已經相關的插件，可以使用或者使用在這篇文章中，我使用和，如果你不喜歡這兩個庫，你可以選擇你喜歡的任何一個庫，只要它能在瀏覽器中運行就可以。本文翻譯自：Automated testing with Headless Chrome作者：Eric Bidelman (Google 工程師)譯者：justjavac 如果您想使用 Headless Chrome 進行自動測試...

caozhijian 2019-08-20 17:58 評論0 收藏0
使用 Headless Chrome 進行自動化測試

摘要：安裝安裝依賴庫安裝已經相關的插件，可以使用或者使用在這篇文章中，我使用和，如果你不喜歡這兩個庫，你可以選擇你喜歡的任何一個庫，只要它能在瀏覽器中運行就可以。本文翻譯自：Automated testing with Headless Chrome作者：Eric Bidelman (Google 工程師)譯者：justjavac 如果您想使用 Headless Chrome 進行自動測試...

Guakin_Huang 2019-05-29 17:01 評論0 收藏0
使用瀏覽器的HEADLESS模式進行自動化測試

摘要：了解模式指的是不需要用戶界面的瀏覽器，這種瀏覽器在自動化測試和爬蟲領域有著廣泛的應用。實踐使用瀏覽器的模式進行自動化測試，你需要先滿足以下前提運行環境或者或者最新版已加入萬事俱備，廢話不多說我們直接上演示代碼。了解HEADLESS模式 HEADLESS BROWSER 指的是不需要用戶界面的瀏覽器，這種瀏覽器在自動化測試和爬蟲領域有著廣泛的應用。例如你想在網頁上運行一些測試，從網頁...

lanffy 2019-07-30 16:34 評論0 收藏0
前端每周清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
三分鐘學會如何在函數計算中使用 puppeteer

摘要：函數計算就是這里的膠水。總結函數計算有如下優勢無需采購和管理服務器等基礎設施專注業務邏輯的開發提供日志查詢性能監控報警等功能快速排查故障以事件驅動的方式觸發應用響應用戶請求毫秒級別彈性伸縮，快速實現底層擴容以應對峰值壓力按需付費。摘要：使用 puppeteer 結合函數計算，可以快速的構建彈性的服務完成各種功能，包括：生成網頁截圖或者 PDF、高級爬蟲，可以爬取大量異步渲染內容的網...

zhkai 2019-06-21 16:46 評論0 收藏0