給初學者的自動化跨瀏覽器兼容性測試指南
譯文【51CTO.com快譯】根據StatCounter的一項統計：在亞洲，有82%的移動用戶使用著Android，在iOS上的用戶數占比為17%，而其他操作系統的使用者則不到1%。在美國，有61%的人使用著iOS，只有38%的人使用Android。而且仍有10.5%的Windows用戶仍在使用著Windows 7。在用戶設備的默認/首選分辨率方面，有著360x640像素、1366x768像素和1920x1080像素等不同的規格。可見，就全球范圍而言，Android主導著操作系統市場，其次則為Windows、iOS和OSX。同樣，瀏覽器的市場以Chrome為主，其次是Safari、Firefox、Samsung Internet、Edge、Opera和UC Browser。
最常見的跨瀏覽器兼容性問題
如今，各種Web應用往往是通過復雜的CSS、HTML5、JS和其他幾個框架來構建的。不過，并非每個用戶端的瀏覽器都會通過自我升級，來支持開發人員部署的各項新功能。據此，我們需要通過測試，來提前處置如下常見的跨瀏覽器兼容性問題：
- 瀏覽器的各個版本均不支持某些HTML5標簽。
- 不支持復雜的CSS、AJAX、JS、Flex功能，或在實現行為上有所差異。
- 并非所有的瀏覽器都支持所有的圖像格式(特別是PNG問題在一些舊版的IE瀏覽器上比較普遍)
- 并非所有的媒體格式都能夠得到支持(例如iPhone和Blackberry上的Flash問題)
- 設備本身的限制。例如，殘障人士的屏幕閱讀器應用可能不支持網站內容的正常顯示。
因此，在數字化設備和用戶偏好紛繁復雜的情況下，企業為了保證用戶的UI/UX，需要仔細考慮如下問題：
- 如何以經濟高效的方式為所有用戶設計、開發和部署出健壯的應用程序?
- 如何確保應用程序能夠適用于所有用戶?
- 如何在客戶使用的各種設備、操作系統、瀏覽器和屏幕分辨率上，提供無縫的用戶體驗?
雖然在不同的場景下，上述問題有著不同的優先級，但是它們都引出了跨瀏覽器兼容性測試(https://www.lambdatest.com/feature)，這一主題。
什么是跨瀏覽器測試?
簡而言之，跨瀏覽器兼容性測試是在各種設備、操作系統、瀏覽器、及其不同版本上對Web應用進行檢查、驗證、以及迭代式增強，使其能夠對所有用戶提供正常服務的方法。例如，對于擁有數十億用戶的Facebook之類的大型應用而言，在理想情況下，我們應當進行針對“瀏覽器A，版本B，操作系統C，屏幕分辨率D”等所有組合的測試。
手動與自動化跨瀏覽器測試
跨瀏覽器測試主要分為三大類：探索性測試、視覺測試和功能性測試。除了視覺測試需要手動開展之外，其他兩類測試都可由自動化來完成。手動測試的弊端主要體現在：不僅耗費時間和資源，而且測試的覆蓋面可能不夠全面。因此，我們通常需要采用混合的測試策略。也就是說，開展跨瀏覽器兼容性測試的工程師，往往需要具備腳本的編寫能力，可以使用Selenium，以及其他編程語言(如：Java、Python、C#、JS、PHP等)，通過自動化的方式，來執行各項測試任務。據此，他們可以：
- 以自動化的方式，查看目標站點的所有HTML、JS和CSS代碼，盡早發現它們在不同瀏覽器上顯示和運行時的錯誤與警告。
- 自動獲取Web元素的屏幕快照，以便開展交叉驗證。
- 人工判斷受測站點的美觀性和對殘障人士的操作友好性。
在此基礎上，自動化跨瀏覽器兼容性測試的好處主要體現在如下方面：
- 提供無縫的用戶體驗，保證內部版本的兼容性和質量。
- 盡早、盡快地識別并評估可用性或功能性上的風險，進而按風險的優先級予以修復。
- 作為CI/CD管道實施的關鍵階段，自動化測試通過將Selenium之類的自動化工具，集成到DevOps的自動化策略中，可以縮短代碼的發布周期。
- 測試團隊可以更加專注于編寫健壯的腳本，而將繁瑣的測試基礎架構，交給諸如LambdaTest之類的云測試自動化服務。
- 通過基于云的解決方案，我們不但可以避免人為的錯誤，而且能夠一次性測試2000多種瀏覽器與設備的組合，以保障測試的覆蓋率和準確性。
如何開展有效的跨瀏覽器兼容性測試?
通常，我們需要通過如下四個階段，來完成跨瀏覽器的測試。
- 設計
此階段涉及到徹底調查應用程序的目標市場，收集所需的可用性需求，通過設計測試路線圖，以確保應用能夠被成功地開發和部署。例如，如果您要為印度市場(那里仍有許多人在使用IE)構建B2B產品，而且該產品中需提供一個由WebGL支持的3D動畫效果。那么，您需要考慮的一個因素便是：是否要支持IE 11之前的版本。如果確實無法支持的話，產品應當能夠在舊的版本上，讓應用并不呈現此功能，以免破壞用戶的UI/UX。
- 開發
在此階段，您需要將應用程序細化為單獨的組件，以分解出不同的功能模塊。據此，您可以為那些可能無法在各種瀏覽器或設備上良好呈現的功能，設計出獨立的代碼方案。此外，開發人員也需要考慮到硬件方面的限制，某些功能可能根本無法在某些設備上實現，因此需要事先設計好替代方法。
- 測試
自動化測試工程師將在該階段，通過如下方法測試每個新構建的功能：
首先，在穩定的主流瀏覽器(如：Safari、Chrome和Firefox)上測試應用程序，并確認不會出現任何妨礙應用呈現的錯誤。
接著，可以嘗試使用lo-fi(低保真)的可訪問性測試，來交叉驗證應用是否需要少量的輔助技術(例如：僅適用于鍵盤或屏幕閱讀器的環境)。
通過仿真器或虛擬機(當然如果買得起真實的物理設備則更好)，進行不同設備、瀏覽器、及其版本的組合測試。
使用自動測試工具(如：Selenium Grid)或商業服務(如：LambdaTest)來進一步提高跨瀏覽器兼容性測試的準確性、速度、以及瀏覽器環境的覆蓋率。
其中，跨瀏覽器兼容性測試的要點清單可以總結為如下方面：
- HTML、xHTML、jQUERY、CSS、JS、AJAX的驗證
- SSL證書的驗證
- HTML字符的編碼和日期格式
- 在不同的屏幕分辨率下，呈現響應式應用
- 不同瀏覽器中布局的一致性，包括：字體樣式、色彩渲染、導航、客戶端表單驗證、縮放功能等
- 各種效果與功能，包括：動畫、鏈接、插件、腳本等
- 持續迭代測試和開發
該階段需要查找我們在上述測試階段產生的錯誤、及其根本原因，進而縮小存在此類錯誤的瀏覽器版本、設備、分辨率的范圍。當然，錯誤的原因可能并非來自應用的本身，也可能是瀏覽器或設備廠商造成的。因此，我們通過在類似的瀏覽器或設備進行深入測試，以評估錯誤的規模，進而報告給有關的開發團隊。
跨瀏覽器兼容性測試的推薦工具和基于云的服務
目前，最受歡迎的Web和移動測試開源框架有：
- Selenium
- Appium
- 基于商業云的跨瀏覽器測試應用，例如LamdbaTest之類基于云端的跨瀏覽器測試解決方案，提供了AI驅動測試、團隊協作、增強的可視性、并行測試、自動化測試、按需擴容、布局截圖捕獲、以及錄制測試會話等高級功能。
下面，我為您列出了提交和報告不同瀏覽器錯誤的對應鏈接：
而以下是各大主流瀏覽器平臺的開發者測試鏈接。您可以有針對性地對即將發布的應用進行測試：
跨瀏覽器測試的示例
總的說來，我們首先會在云端使用LambdaTest的免費版本設計自動化測試。接著，我們將使用Python在“jqueryui.com”上構建具有拖放功能的HTML元素。然后，我們將在Chrome和Firefox中測試此功能。當然，您也可以在其他瀏覽器版本、操作系統、以及屏幕分辨率上開展測試。
下面便是被部署在虛擬環境中的lambdatest_crossbrowser.py文件里的Java測試代碼。
- from selenium import webdriver
- from selenium.webdriver.common.action_chains import ActionChains
- import time
- username = "hustlewiz247"
- accessToken = "1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC"
- gridUrl = "hub.lambdatest.com/wd/hub"
- browsers = [
- {
- "browser":"Chrome",
- "version":"71.0"
- },
- {
- "browser":"Firefox",
- "version":"71.0"
- }
- ]
- for cap in browsers:
- desired_cap = {
- 'platform' : "win10",
- 'browserName' : cap["browser"],
- 'version' : cap["version"],
- "resolution": "1024x768",
- "name": "LambdaTest Cross Browser Compatibility Testing",
- "build": "LambdaTest Cross Browser Compatibility Testing",
- "network": True,
- "video": True,
- "visual": True,
- "console": True,
- }
- url = "https://"+username+":"+accessToken+"@"+gridUrl
- print("Initiating remote driver on platform: "+desired_cap["platform"]+" browser: "+desired_cap["browserName"]+" version: "+desired_cap["version"])
- driver = webdriver.Remote(
- desired_capabilities=desired_cap,
- command_executor= url
- )
- driver.maximize_window()
- driver.get('https://jqueryui.com/draggable/')
- driver.switch_to.frame(0)
- source1 = driver.find_element_by_id('draggable')
- action = ActionChains(driver)
- action.click_and_hold(source1).move_by_offset(150, 100).pause(2).move_by_offset(-10, -10).release().perform()
- print("Dragged successfully\n")
- time.sleep(5)
- driver.get('https://jqueryui.com/droppable/')
- driver.switch_to.frame(0)
- source1 = driver.find_element_by_id('draggable')
- target1 = driver.find_element_by_id('droppable')
- actions2 = ActionChains(driver)
- actions2.click_and_hold(source1).move_to_element(target1).pause(2).move_by_offset(20, 20).release().perform()
- print("Dragged and dropped successfully\n")
- time.sleep(5)
- if target1.text == "Dropped!":
- print("Test Executed Successfully On : " + str(cap["browser"]))
- time.sleep(2)
- driver.quit()
以下Java代碼是從Selenium庫中導入的webdriver和actionchains類。
- from selenium import webdriver
- from selenium.webdriver.common.action_chains import ActionChains
上述代碼導入了一個內置了Python包的時間模塊，它可以將程序的執行暫停指定的秒數。接著，我們通過如下代碼，設置LambdaTest的用戶身份驗證代碼，配置用戶名、訪問令牌和gridUrl。你可以在LambdaTest的自動化儀表板(https://automation.lambdatest.com/)中找到相關內容。
- username = "your username"
- accessToken = "your access token"
- gridUrl = "hub.lambdatest.com/wd/hub"
我們會在不同瀏覽器中創建一個目錄，以便針對應用程序開展交叉測試。在此，我們以Chrome v71.0和Firefox v71.0兩個瀏覽器為例，通過“瀏覽器”和“版本”的鍵-值對，指定需要測試應用的目標瀏覽器，及其特定版本。
- browsers = [
- {
- "browser":"Chrome",
- "version":"71.0"
- },
- {
- "browser":"Firefox",
- "version":"71.0"
- }
- ]
我們通過for cap in browsers:來遍歷瀏覽器字典，進而對Chrome和Firefox進行功能上的交叉測試。而在cap字典中，我們為lamdatest自動化測試的selenium grid指定測試的配置環境。如下代碼中的“Platform”指定了目標操作系統，后續還包括：瀏覽器名稱、分辨率等方面。
- desired_cap = {
- 'platform' : "win10",
- 'browserName' : cap["browser"],
- 'version' : cap["version"],
- "resolution": "1024x768",
- "name": "LambdaTest Cross Browser Compatibility Testing",
- "build": "LambdaTest Cross Browser Compatibility Testing",
- "network": True,
- "video": True,
- "visual": True,
- "console": True,
- }
我們通過如下URL的command_executor，來指定遠程服務器的地址位置：
- url = "https://"+username+":"+accessToken+"@"+gridUrl
同時，我們運用如下Java代碼來創建瀏覽器驅動程序的實例：
- driver = webdriver.Remote(
- desired_capabilities=desired_cap,
- command_executor= url
我們可以通過執行driver.maximize_window()來最大化瀏覽器窗口。而為了在遠程瀏覽器中獲取URL，以測試拖放功能，我們使用
在此，我們可以觀察到該網站在iFrame中帶有拖放功能。因此我們需要通過driver.switch_to.frame(0)換到第0幀，以實現與該iFrame中的HTML元素進行交互。此外，我們還可以通過source1 = driver.find_element_by_id('draggable')，來查找可拖放的HTML元素。 同時，我們通過action = ActionChains(driver)，來創建一個Actionchains方法的別名。而selenium中的Actionchains類可以實現與瀏覽器元素的硬件交互。 下面的代碼負責創建：單擊可拖動元素，將其保持一會兒，將源組件移動到另一個位置，最后釋放它，以及打印出參考消息等一系列操作。在實際的操作中，您可以單擊屏幕快照、或調用用于觸發電子郵件及通知的API，然后發送成功與否的通知。 如果您想在本地系統的測試中觀察得更加仔細，那么可以調用“time”包中的“sleep”方法，通過time.sleep(5)，來暫停一段時間。 下面，我們在瀏覽器中獲取另一個URL--driver.get，以測試“拖放”功能。 如前所述，我們通過driver.switch_to.frame(0)，可以切換到iFrame的第0幀，以便進行可拖動和可放置的元素交互。 為了將source1(draggable)元素拖到source2(droppable)，我們可以使用如下Java代碼段，獲得可拖動的HTML元素位置、以及可拖放的HTML元素位置。 而為了放到特定元素上，我們可以通過如下Java代碼創建了一系列的拖動動作。 在源元素被放到目標位置時，我們將文本更改為“Dropped!”，以對其進行交叉驗證，并在受測瀏覽器中顯示一條輸出消息。 我們使用driver.quit()，來退出已啟動的瀏覽器實例。具體負載執行的終端命令為：python your_test_file_name.py。而在成功執行后，我們將在LambdaTest的儀表板上看到如下信息為： 同時在終端上的顯示信息為： 如您所見，該測試首先運行在Chrome上，然后運行在Firefox上。其實，LambdaTest也提供了一個功能生成器，可以幫助您輕松地設定各種所需的瀏覽器和操作系統功能。 小結 作為測試人員，您往往肩負著確保被測應用能夠在各種設備和瀏覽器之間的平穩運行的使命。而跨瀏覽器測試技能正是測試人員武器庫中，最有效的武器之一。我們既需要人工進行測試結果的判斷，也需要自動化工具來簡化測試的相關基礎架構，增強測試效率與能力，不斷提高測試的覆蓋面和準確度。 原文標題：A Beginner’s Guide to Automated Cross-Browser Compatibility Testing，作者：Jaswant Kaur 【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】 
