在過(guò)去的一個(gè)月里，我研究了關(guān)于Sauce Labs的一個(gè)很酷的新功能，該功能有助于前端應(yīng)用的性能。
以下將是我最近的研究,在我們談?wù)撔阅軠y(cè)試時(shí)，大多數(shù)人都會(huì)想到壓力和負(fù)載測(cè)試，這涉及到測(cè)量后端系統(tǒng)的響應(yīng)。
現(xiàn)在已經(jīng)有很多很棒的工具可以用來(lái)加載測(cè)試應(yīng)用程序，但是Sauce的解決方案是專門為前端性能測(cè)試設(shè)計(jì)的。
為什么需要這個(gè)？
現(xiàn)在許多現(xiàn)代應(yīng)用程序都使用JavaScript框架，如React和AngularJS這樣的前端庫(kù)。這些功能豐富的前端庫(kù)添需要增加一層對(duì)應(yīng)的度量標(biāo)準(zhǔn)幫助我們監(jiān)控性能。
因此，在本地機(jī)器上度量正在測(cè)試的應(yīng)用程序的呈現(xiàn)時(shí)間變得至關(guān)重要。
您可以獲得什么樣的性能數(shù)據(jù)？
Sauce能夠訪問(wèn)與Chrome瀏覽器其他并行連接。?他們通過(guò)控制chrome driver和Chrome本身之間的通信來(lái)實(shí)現(xiàn)這一點(diǎn)。
這使得他們可以開始跟蹤瀏覽器，并從Chrome中獲取瀏覽器引擎中發(fā)生的任何事情的所有信息。
然后，他們使用谷歌提供的工具，如Lighthouse，來(lái)解析這些所有的數(shù)據(jù)。
因?yàn)楦櫲罩緮?shù)據(jù)可能有大量的有效負(fù)載(有時(shí)高達(dá)10兆字節(jié))，而不使用諸如Sauce之類的東西，您可能無(wú)法使用它們。
Sauce將掃描日志，以便您輕松讀取所需性能指標(biāo)。
你可以用sauce性能測(cè)量什么？
新的Sauce性能功能幾乎可以捕獲所有JavaScripts呈現(xiàn)指標(biāo)，包括：
Performance Score - 提供性能指標(biāo)的加權(quán)平均值，有助于跟蹤團(tuán)隊(duì)進(jìn)度。
Page Load Time - 顯示頁(yè)面何時(shí)完全加載（或?yàn)g覽器正式觸發(fā)onload事件時(shí)）。
Speed Index - Google定義的頁(yè)面的視覺(jué)完整性。
Estimated Input Latency - 輸入響應(yīng)性是用戶如何感知應(yīng)用程序性能的關(guān)鍵因素。
Time to First Byte -? ?從服務(wù)器、相關(guān)應(yīng)用程序緩存或本地資源接收響應(yīng)的第一個(gè)字節(jié)之前所花費(fèi)的時(shí)間。
Time to First Paint - 這是第一次在場(chǎng)景中繪制像素點(diǎn)的時(shí)間。這個(gè)指標(biāo)不包括默認(rèn)的背景色，但包括任何用戶定義的背景色。
Time to First Contentful Paint - 當(dāng)繪制任何內(nèi)容（文檔對(duì)象模型中定義的對(duì)象）時(shí)，將觸發(fā)第一個(gè)內(nèi)容繪制。?這可以是文本，圖像或畫布渲染。
Time to First Meaningful Paint - 第一個(gè)有意義的繪畫是瀏覽器提供的指標(biāo)，用于衡量在網(wǎng)站上完全呈現(xiàn)最有意義的內(nèi)容所需的時(shí)間。?它相當(dāng)于第一個(gè)內(nèi)容繪畫，并描述了瀏覽器首次渲染任何文本，圖像（包括背景圖像），非白色畫布或SVG之前的持續(xù)時(shí)間。?這包括具有掛起的Web字體的文本。?這是用戶可以開始使用頁(yè)面內(nèi)容的第一個(gè)時(shí)刻。
Time to Interactive - 從導(dǎo)航開始到布局穩(wěn)定，Web字體可見，頁(yè)面響應(yīng)用戶輸入的秒數(shù)。?如果沒(méi)有任務(wù)阻塞至少50毫秒，頁(yè)面將穩(wěn)定。
Time to First CPU Idle - CPU處理所有頁(yè)面信息所需的時(shí)間。
DOM Content Loaded - 在完全加載和解析初始HTML文檔時(shí)，將觸發(fā)加載DOM內(nèi)容的事件，而無(wú)需等待樣式表，圖像和子幀完成加載。?應(yīng)該僅使用非常不同的事件加載來(lái)檢測(cè)完全加載的頁(yè)面。?將DOM內(nèi)容加載更合適時(shí)，將加載時(shí)間用作性能指標(biāo)是一個(gè)流行的錯(cuò)誤。
（*這些定義的參考資料來(lái)自?Google Lighthouse Docs?和?FireFox Developer docs.)
雖然服務(wù)器端因素影響這些度量，但是如果您能夠隔離它們并隨著時(shí)間的推移度量它們，那么您可以捕獲這些增量。
這可以讓您了解應(yīng)用程序加載和呈現(xiàn)的速度。
您還可以編寫代碼來(lái)檢查您沒(méi)有超出以前的基準(zhǔn)測(cè)試。
它還提供了基于lighthouse計(jì)算的性能評(píng)分，這是使用基本Selenium WebDriver通常無(wú)法獲得的數(shù)據(jù)。
如何在Selenum測(cè)試中添加sauce lab性能測(cè)試
要在Sauce Labs中開始捕獲性能值，您需要做的就是為現(xiàn)有的WebDriver測(cè)試添加兩個(gè)新功能。
extendedDebugging：true，
capturePerformance：true，
沒(méi)有sauce lab話，我需要非常麻煩的進(jìn)行這方面的測(cè)試
要在過(guò)去做到這一點(diǎn)，我必須創(chuàng)建一個(gè)WinRunner腳本。然后，我必須添加一個(gè)循環(huán)計(jì)時(shí)器函數(shù)，等待元素出現(xiàn)在應(yīng)用程序中。
然后，我將它添加到LoadRunner控制器中，并使用HTTP Vuser協(xié)議對(duì)系統(tǒng)加載。然后，WinRunner腳本將作為GUI Vuser在客戶機(jī)上運(yùn)行，并保持本地呈現(xiàn)時(shí)間的計(jì)時(shí)。
當(dāng)然，這并不準(zhǔn)確，但在當(dāng)時(shí)，這是我實(shí)現(xiàn)這個(gè)功能的唯一方法。如果我以前有sauce lab，我就能省下很多時(shí)間。
為什么這很酷
是它與負(fù)載和壓力測(cè)試沒(méi)有特別的關(guān)系;?事實(shí)上，它是故意不考慮它們的。
當(dāng)遇到性能下降的情況時(shí)，我們不可避免地會(huì)在用戶的行為中感覺(jué)到性能下降。
此時(shí)，大多數(shù)測(cè)試人員所做的第一件事就是運(yùn)行一個(gè)負(fù)載和壓力測(cè)試，認(rèn)為這是一個(gè)性能問(wèn)題。但是無(wú)論您只是使用幾個(gè)節(jié)點(diǎn)進(jìn)行熱身，還是運(yùn)行500個(gè)節(jié)點(diǎn)，都會(huì)發(fā)生這種行為。
它不是線性增長(zhǎng);它仍然是靜態(tài)的。
這可能會(huì)讓你說(shuō)“哦，天哪。這意味著UI中有些東西發(fā)生了變化。例如，有人引入了一些運(yùn)行時(shí)間很長(zhǎng)的DOM元素，或者有人增加了圖像的大小，等等。
當(dāng)我們看到性能問(wèn)題時(shí)，我們傾向于運(yùn)行負(fù)載和壓力測(cè)試，而不理解它實(shí)際上是一個(gè)UI問(wèn)題。
使用此工具，您可以避免開銷，并使用它不僅幫助診斷UI問(wèn)題，還可以在您特別關(guān)心的頁(yè)面上輸入性能，然后隨著時(shí)間的推移注意該頁(yè)面上的性能是否發(fā)生了變化。
你為什么要關(guān)心前端性能？
有一個(gè)搜索引擎優(yōu)化?（SEO）的B2C網(wǎng)站，每天有數(shù)百萬(wàn)的點(diǎn)擊量。
他們有大約1萬(wàn)個(gè)關(guān)鍵詞排名第一。
后來(lái)有一天，谷歌引入了一種名為Panda的算法，它改變了谷歌對(duì)其搜索機(jī)器人查看web內(nèi)容的方式進(jìn)行索引的方式。
在改變之前，他們綜合考慮了反彈率和相關(guān)性等因素。在Panda中，他們開始比以前的算法更重視頁(yè)面性能。
有一天突然這個(gè)網(wǎng)站排名開始下降。
花了幾個(gè)月的時(shí)間通過(guò)Lighthouse來(lái)檢查他們的頁(yè)面表現(xiàn)如何。
如果他們當(dāng)時(shí)就有了這個(gè)特性，并在Selenium腳本的旁邊運(yùn)行，他們就會(huì)立即知道頁(yè)面加載何時(shí)開始變慢，并且不會(huì)受到如此巨大的SEO損失。
因此，如果您在零售或銀行業(yè)或某些BTC中搜索引擎優(yōu)化是至關(guān)重要的，那么在測(cè)試中運(yùn)行這些測(cè)試是非常寶貴的。
另外一個(gè)基于性能的測(cè)試工具叫做Speedo。
Speedo是一個(gè)NodeJS包，使您能夠直接從命令行在Sauce上運(yùn)行性能測(cè)試。
Speedo旨在幫助團(tuán)隊(duì)開始進(jìn)行性能測(cè)試，因此它的設(shè)計(jì)易于使用，并且可以處理與運(yùn)行前端性能測(cè)試和驗(yàn)證性能回歸相關(guān)的復(fù)雜性。
Speedo可輕松集成任何CI / CD系統(tǒng)，這是將Sauce Performance插入CI / CDpipeline 并開始捕獲性能的絕佳方式。
如果您有使用Sauce Labs的企業(yè)計(jì)劃并且正在使用Chrome（截至目前，性能指標(biāo)只能在Google Chrome上捕獲），則需要查看此新功能。
當(dāng)然以上是和sauce labs 服務(wù)強(qiáng)綁定? 有沒(méi)有基于開源的免費(fèi)的工具？
當(dāng)然沒(méi)有。。。。 但是我們可以進(jìn)行二次開發(fā) 自己在腳本中收集所需數(shù)據(jù) 拿 python selenium 舉個(gè)栗子
```?
''' Loosely based on the example code in http://www.obeythetestinggoat.com/
how-to-get-selenium-to-wait-for-page-load-after-a-click.html
'''
'''
Import the necessary packages required for execution
'''
from selenium import webdriver
''' Chrome web driver interface
'''
hyperlink = "http://lambdatest.com"
driver = webdriver.Chrome()
driver.get(hyperlink)
''' Use Navigation Timing? API to calculate the timings that matter the most '''?
navigationStart = driver.execute_script("return window.performance.timing.navigationStart")
responseStart = driver.execute_script("return window.performance.timing.responseStart")
domComplete = driver.execute_script("return window.performance.timing.domComplete")
''' Calculate the performance'''
backendPerformance_calc = responseStart - navigationStart
frontendPerformance_calc = domComplete - responseStart
print("Back End: %s" % backendPerformance_calc)
print("Front End: %s" % frontendPerformance_calc)
driver.quit()
```?
我們可以看到其實(shí)我們?cè)谀_本中 調(diào)用了一些瀏覽器對(duì)外暴露的接口 來(lái)實(shí)現(xiàn)性能監(jiān)控,然后可以利用圖表進(jìn)行展示，當(dāng)然如果有時(shí)間精力，完全可以自己做一套定制化的服務(wù)。
本人：石頭 來(lái)自thoughtworks 西安
個(gè)人website：https://qaseven.cn
