使用和測試Flood Element性能的若干貼士
譯文【51CTO.com快譯】市面上有一款新的性能測試工具：Flood Element。它是可擴展的、基于瀏覽器的工具，讓你可以用JavaScript編寫腳本，像實際用戶那樣與網頁進行交互。
瀏覽器級用戶(Browser Level Users)是一種比較新的負載測試方法，克服了傳統測試方法的許多常見挑戰。它提供：
- 類似Selenium等常見功能測試工具的腳本，更易于上手。
- 更真實的結果，基于實際的瀏覽器性能而不是API響應。
- 針對Web應用程序的所有組件進行測試的功能，包括通過瀏覽器呈現的JavaScript等元素。
鑒于上述優點，考慮Flood Element用于Web負載測試是不二的選擇，如果你使用JMeter或HP LoadRunner之類的現有工具覺得不盡如人意，更是如此。
結合Element和Flood將其變成了非常強大的負載測試工具。這里有一篇詳細的指南(https://help.flood.io/getting-started-with-load-testing/step-by-step-guide-flood-element)，如果你想開始入手，不妨一讀。幾個月來，我一直在使用和測試Element，在此分享這個過程中學到的幾個貼士。
一、初始化腳本
你始終可以從零開始，但最快捷的入手方法是從終端輸入element init myfirstelementtest，并填寫偏愛的項目名稱。
然后，系統要求你輸入測試標題以及編寫腳本的相應URL。1分鐘后，你會看到一個新的目錄已創建：
Element將自動創建一個名為test.ts的文件。此文件包含腳本的框架以及一些示例代碼，可幫助你找到按鈕然后點擊。但在你打開它之前，先做這個......
二、選擇合適的文本編輯器
在Element中編寫腳本已經很簡單，但語法高亮和代碼完成是大有幫助的兩項功能。語法高亮將極大地改善學用像Element這種新測試工具的體驗，而代碼完成將使你在變得更有經驗后編寫腳本極快。我的***文本編輯器是Visual Studio Code，它擁有這兩個功能。它漂亮且實用。
語法高亮是指文本編輯器根據代碼在編程語言中的角色，智能地更改代碼的字體顏色。這是我們之前在VS Code中生成的test.ts文件的屏幕截圖，以表明我要傳達的意思：
這使得代碼解讀起來更一目了然：注釋呈綠色，值和標簽呈橙色，等等。
代碼完成是指你開始輸入內容時，VS Code貼心地打開上下文菜單，給出了你可以使用的方法方面的建議。
我喜歡該功能，因為這意味著我不需要記住方法的確切名稱。它還建議你已定義的變量名稱，并高亮顯示無意義的代碼。這將有助于使你的測試對別人來說更易于維護和閱讀，如果你希望將來擴展測試，這是一大好處。
三、獲取截圖
Element***大的功能之一是它能夠獲取屏幕截圖。我發現調試時非常有用，因為有時這樣更容易看明情況。若使用基于協議的工具，調試會是極其復雜化和技術化的過程。
有兩種方法可以在Element中獲取屏幕截圖：
1. 添加設置以便遇到錯誤時自動獲取屏幕截圖。為此，你可以在TestSettings中將screenshotOnFailure設置為“true”：
- export const settings: TestSettings = {
- device: Device.iPadLandscape,
- userAgent: 'flood-chrome-test',
- clearCache: true,
- disableCache: true,
- screenshotOnFailure: true,
- }
2. 在腳本中的某個點顯式獲取屏幕截圖。為此，將await browser.takeScreenshot()添加到你的代碼中。
四、查看截圖
一旦你在測試中獲取了屏幕截圖，可能希望查看它們，知道它們會存起來以備將來妥善保管。無論你在本地運行測試還是將其上傳到Flood以便以更高的并發性運行，Flood Element都能滿足你的要求。
1.本地運行測試
屏幕截圖將作為.jpg文件保存在與你的運行對應的帶時間戳的文件夾中。它看起來應該是這樣：…myfirstelementtest/tmp/element-results/test/2018-11-20T135700.595Z/flood/screenshots/。屏幕截圖會以獨特的方式命名，那樣即使同一步驟的新屏幕截圖也不會覆蓋舊屏幕截圖。
然而，我很少需要查找該文件夾中的屏幕截圖，因為我更喜歡在iTerm2 for MacOS中查看它們。iTerm是終端的替代工具，與Element特別兼容。獲取屏幕截圖后，iTerm實際上會嵌入式顯示：
2.測試在Flood中運行
需要更大的并發性時，在Flood上運行Element腳本很理想。Flood不會在本地訪問你的屏幕截圖，而是將圖像集中到帳戶中，那樣即使在云負載注入器被破壞后圖像依然存在。可以通過下載Archived Results來訪問屏幕截圖文件：
還可以點擊儀表板上的步驟查看測試的幻燈片：
五、使用日志
你可能需要查看日志進行更技術性的調試，尤其是屏幕截圖說明不了全部情況時。同樣，無論你在本地運行測試還是將其上傳到Flood以便以更高的并發性運行，Flood Element都能滿足你的要求。
本地運行測試
比如說，你可以輸入：console.log('orderValues = ’ + orderValues)，輸出到控制臺。
這將在腳本中的這個點輸出變量orderValues的值。如果你在本地運行Element，會在終端中看到這個。
測試在Flood中運行
如果你在Flood上運行腳本，可以下載日志(在前面提到的同一個Archived Results壓縮文件中)或點擊Logs選項卡：
六、有趣的標志
Element隨帶幾個標志(flag)，那樣可以更好地控制腳本在本地如何運行。這是我偏愛的幾個標志：
headless標志
如有疑問，在non-headless模式下運行Element，看看在Chrome上實際打開Web應用程序并與頁面進行交互的腳本。這只能在本地實現，但能親眼看到實時發生的情況再好不過了，而不是事后依賴屏幕截圖和日志。想啟用該模式，運行測試時添加該標志：
- element run myfirstelementtest.ts --no-headless
watch標志
Element遇到錯誤或完成迭代時會自動關閉瀏覽器窗口。添加--watch將使瀏覽器窗口保持打開，然后監視腳本。一旦腳本保存完畢，它會從頭開始自動在同一個窗口中運行。只需添加該標志，如上例所示：
- --watch
dev tools標志
打開一個瀏覽器實例，并在Chrome Dev Tools打開的情況下運行腳本，讓你可以查找要編寫腳本的下一個操作的定位符。只需添加該標志，如***示例所示：
- --dev-tools
想了解更多標志，請使用element run --help。
七、試一試Element
你剛大致了解了Flood Element，已準備好開始使用。下載Element(https://element.flood.io/)，開始編寫功能測試腳本并將其重新用作Flood上的負載測試腳本。 如果你沒有Flood帳戶，可以在Flood官網(https://flood.io/load-performance-testing-tool/free-load-testing-trial/)上輕松注冊免費試用版。
原文標題：Tips for using Flood Element for performance testing，作者：Nicole van der Hoeven
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
