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