?譯者 | 陳峻

審校 | 孫淑娟

在敏捷式的開發(fā)場(chǎng)景中，由于業(yè)務(wù)需求和技術(shù)環(huán)境時(shí)常發(fā)生變化，為了優(yōu)化DevOps和QA工作流，項(xiàng)目團(tuán)隊(duì)往往需要通過(guò)部署最新的系統(tǒng)架構(gòu)，以合理的成本和速度，去管理和實(shí)現(xiàn)既定的業(yè)務(wù)目標(biāo)。近年來(lái)出現(xiàn)的自動(dòng)化的可視化測(cè)試，簡(jiǎn)化了產(chǎn)品驗(yàn)證的關(guān)鍵環(huán)節(jié)。作為測(cè)試軟件應(yīng)用是否滿足生產(chǎn)環(huán)境的主要工具，此類測(cè)試已變得越來(lái)越流行。

顧名思義，自動(dòng)化的可視化測(cè)試是通過(guò)關(guān)注軟件應(yīng)用程序的可視化組件，來(lái)測(cè)試軟件應(yīng)用程序的自動(dòng)化過(guò)程。對(duì)于大多數(shù)質(zhì)量保證（QA）團(tuán)隊(duì)而言，雖然此類測(cè)試是他們?nèi)粘y(cè)試策略中的一部分，但是在實(shí)現(xiàn)方式和使用工具上存在著巨大差異。

https://www.browserstack.com/state-of-visual-testing-report

軟件測(cè)試的主要挑戰(zhàn)

在繼續(xù)討論可視化測(cè)試之前，讓我們先來(lái)了解軟件測(cè)試所面臨的常見挑戰(zhàn)：

• 自動(dòng)化與手動(dòng)：任何涉及到大量人工操作的測(cè)試策略，都會(huì)耗費(fèi)團(tuán)隊(duì)大量的資源和時(shí)間，其中也包括在測(cè)試運(yùn)行和報(bào)告更新過(guò)程中的人際交流。而自動(dòng)化的實(shí)現(xiàn)則需要測(cè)試團(tuán)隊(duì)對(duì)待部署的框架具有深入的理解。同時(shí)，頻繁變化的業(yè)務(wù)需求，也會(huì)給自動(dòng)化測(cè)試計(jì)劃的維護(hù)與更新，帶來(lái)一定的挑戰(zhàn)。
• 測(cè)試環(huán)境：為了在近乎實(shí)際的情況下開展測(cè)試，測(cè)試團(tuán)隊(duì)需要能夠在一組相關(guān)的設(shè)備、瀏覽器、網(wǎng)絡(luò)環(huán)境中，執(zhí)行各項(xiàng)操作，以便在受控的環(huán)境中復(fù)刻真實(shí)的使用狀況。
• 完成時(shí)間：在軟件項(xiàng)目中開發(fā)新的功能需要時(shí)間，開展測(cè)試同樣也需要時(shí)間。為此，測(cè)試團(tuán)隊(duì)需要通過(guò)優(yōu)化測(cè)試，來(lái)壓縮項(xiàng)目的總時(shí)間，進(jìn)而在最短的時(shí)間內(nèi)，獲得盡可能全面的結(jié)果。團(tuán)隊(duì)可以通過(guò)采用CI/CD，來(lái)自動(dòng)化應(yīng)用程序的構(gòu)建、以及測(cè)試的觸發(fā)，并且通過(guò)儀表板來(lái)跟蹤軟件的總體狀態(tài)。不過(guò)，在從手動(dòng)遷移到自動(dòng)化的過(guò)程中，他們可能因?yàn)闊o(wú)法理解核心業(yè)務(wù)，從而導(dǎo)致測(cè)試腳本雖然能夠快速執(zhí)行，但是其執(zhí)行的測(cè)試并不完整。
• 白盒與黑盒測(cè)試：白盒測(cè)試通常由開發(fā)人員完成，而黑盒測(cè)試則由測(cè)試人員實(shí)施。而這可能會(huì)導(dǎo)致兩組人員之間缺乏溝通，進(jìn)而讓同步性測(cè)試變得困難重重。例如，由于白盒測(cè)試往往會(huì)比黑盒測(cè)試更為詳細(xì)和具體，因此會(huì)導(dǎo)致在相同區(qū)域的測(cè)試覆蓋程度上不盡相同。此外，由于白盒測(cè)試通常是在開發(fā)或分段環(huán)境中運(yùn)行的，而黑盒測(cè)試則在類生產(chǎn)環(huán)境中開展的，這也導(dǎo)致了測(cè)試結(jié)果的復(fù)制和問(wèn)題的調(diào)試，也會(huì)變得困難重重。
• 文檔和報(bào)告：當(dāng)在應(yīng)用程序中檢測(cè)到錯(cuò)誤時(shí)，測(cè)試團(tuán)隊(duì)?wèi)?yīng)當(dāng)按照既定的格式，記錄下所有與測(cè)試相關(guān)的元數(shù)據(jù)和步驟，以保持再現(xiàn)性和更深入的分析。同時(shí)，測(cè)試團(tuán)隊(duì)需要在特性與模塊級(jí)別，去記錄應(yīng)用程序的行為，其中包括：重新創(chuàng)建的步驟、預(yù)期的行為、以及觀察到的行為等。通常，在手動(dòng)場(chǎng)景中，測(cè)試團(tuán)隊(duì)為了能夠?qū)z測(cè)到的問(wèn)題，及時(shí)作為任務(wù)反饋并分配給開發(fā)人員。他們需要使用諸如Jira、Trello等bug跟蹤工具，來(lái)記錄所有的細(xì)節(jié)，并與其他團(tuán)隊(duì)共享。不過(guò)，這往往要求測(cè)試人員能夠清楚地說(shuō)明、并將事件記錄到bug跟蹤器中。而在此過(guò)程中，就可能會(huì)出現(xiàn)表述不清等人為的差錯(cuò)。

https://www.browserstack.com/state-of-visual-testing-report

可見，理解上述提到的各項(xiàng)挑戰(zhàn)，將有助于我們掌握軟件開發(fā)和測(cè)試過(guò)程中的各種復(fù)雜性，也便于我們運(yùn)用正確的工具去解決可能碰到的問(wèn)題。

自動(dòng)化的可視化測(cè)試的特點(diǎn)和優(yōu)勢(shì)

自動(dòng)化的可視化測(cè)試、或稱可視化回歸測(cè)試，是針對(duì)軟件執(zhí)行白盒產(chǎn)品驗(yàn)證測(cè)試的高級(jí)方法。鑒于不同的測(cè)試團(tuán)隊(duì)能夠達(dá)到的自動(dòng)化程度各不相同，我們?cè)诖藢⒁粋€(gè)典型的可視化自動(dòng)化測(cè)試框架的特點(diǎn)羅列如下：

• 能夠?qū)⒉煌脑O(shè)備、瀏覽器和操作系統(tǒng)，組合配置為一個(gè)測(cè)試套件，并添加到測(cè)試環(huán)境中。
• 支持設(shè)計(jì)良好、且高效的腳本語(yǔ)言，并能編寫出各種測(cè)試用例。
• 能夠通過(guò)SDK集成諸如React、Angular等應(yīng)用程序開發(fā)平臺(tái)，以及諸如Ember、Cypress等端到端的測(cè)試框架。
• 能夠在本地開發(fā)、測(cè)試和生產(chǎn)環(huán)境之間順利地同步各項(xiàng)工作。
• 能夠記錄帶有I/O和屏幕輸出的各種測(cè)試運(yùn)行會(huì)話。
• 能夠發(fā)現(xiàn)和記錄應(yīng)用程序版本之間的差異。
• 應(yīng)該具有輕量級(jí)和成本效益的特點(diǎn)。

https://www.browserstack.com/state-of-visual-testing-report

以下是實(shí)施自動(dòng)化的可視化測(cè)試的關(guān)鍵優(yōu)勢(shì)：

• 分離的技術(shù)和業(yè)務(wù)級(jí)測(cè)試：通過(guò)可視化各個(gè)單獨(dú)的應(yīng)用程序版本之間的差異，您可以清楚地劃分運(yùn)行單元、集成、系統(tǒng)和驗(yàn)收測(cè)試的各項(xiàng)團(tuán)隊(duì)職責(zé)。同時(shí)，通過(guò)將測(cè)試集成到CI/CD工作流中，您可以在每次應(yīng)用發(fā)布之前，提供一個(gè)無(wú)縫的業(yè)務(wù)驗(yàn)證層。
• 節(jié)省時(shí)間和資源：顯然，自動(dòng)化可以減少甚至消除手動(dòng)測(cè)試的需要，幫助您節(jié)省上文提到的時(shí)間和資源。而自動(dòng)化的可視化測(cè)試還可以協(xié)助團(tuán)隊(duì)確保測(cè)試用例的正確運(yùn)行和一致性。
• 提高效率：自動(dòng)化的可視化測(cè)試可以通過(guò)提供更可靠且一致性的結(jié)果，來(lái)提高測(cè)試的覆蓋率和準(zhǔn)確性。先進(jìn)的鏡像處理功能則提供了多種方法（如先進(jìn)的AI/ML技術(shù)），能夠更加精確地自動(dòng)記錄問(wèn)題，并發(fā)現(xiàn)其中的差異?？梢哉f(shuō)，一個(gè)“訓(xùn)練有素”的鏡像處理網(wǎng)絡(luò)，絕對(duì)能勝過(guò)一支人類團(tuán)隊(duì)。
• 最少量的人為干預(yù)：自動(dòng)化核心分析既能夠減少人為錯(cuò)誤的可能性，又能夠在保留團(tuán)隊(duì)成員對(duì)于關(guān)鍵過(guò)程的控制權(quán)的基礎(chǔ)上，提供潛在問(wèn)題的盡早反饋，以協(xié)助提高軟件的整體質(zhì)量。

Percy自動(dòng)化的可視化測(cè)試

由BrowserStack推出的Percy，是一個(gè)一體化的可視化測(cè)試與審查分析的平臺(tái)。它能夠通過(guò)可視化整個(gè)回歸測(cè)試的過(guò)程，提供對(duì)于構(gòu)建、差異、快照、以及大量其他功能的訪問(wèn)。

作為BrowserStack套件的一部分，Percy可與Live和Live Automate等其他工具聯(lián)合使用，為您的各種可視化測(cè)試需求，提供全面的覆蓋。下面讓我們來(lái)簡(jiǎn)單了解其執(zhí)行的步驟：

• 首先，你需要在??Percy??處完成注冊(cè)。
• 接著，請(qǐng)?jiān)??Percy應(yīng)用儀表板??上創(chuàng)建項(xiàng)目。
• 請(qǐng)遵循適合您當(dāng)前編程框架的??集成指南??，并使用由其提供的可用于鏈接和驗(yàn)證帳戶的令牌。
• 根據(jù)指南在本地環(huán)境中安裝項(xiàng)目的依賴項(xiàng)，以便向應(yīng)用執(zhí)行腳本寫入??Percy命令??，并制作快照。
• 構(gòu)建并運(yùn)行應(yīng)用程序，通過(guò)檢查日志，以獲取快照事件的更新。
• 在生成完畢后，您可返回??儀表板??處，并查看到自己的構(gòu)建列表。
• 只要您單擊任意條目，都將進(jìn)入review部分。在此，您可以看到瀏覽器與Percy儀表板的其他功能之間的區(qū)別。

在Percy的儀表板上預(yù)覽構(gòu)建

一旦在儀表板上出現(xiàn)了您的構(gòu)建，您便可以通過(guò)調(diào)整項(xiàng)目，來(lái)添加諸如webhook、slack、各種存儲(chǔ)庫(kù)集成，以及在快照中更換瀏覽器等更多功能。同時(shí)，您可以添加團(tuán)隊(duì)成員，并針對(duì)生產(chǎn)環(huán)境進(jìn)行配置，以評(píng)估每個(gè)構(gòu)建的可視化差異，并讓團(tuán)隊(duì)針對(duì)審查開展協(xié)作。

在整個(gè)設(shè)置完成之后，您將獲得如下優(yōu)勢(shì)：

全面的可視化測(cè)試和針對(duì)審批的工作流程

• 易于集成
• 實(shí)時(shí)結(jié)果
• 跨瀏覽器支持
• 強(qiáng)大的分析工具
• 靈活定價(jià)

基于云端的測(cè)試是未來(lái)

基于云端的測(cè)試能夠給我們帶來(lái)各種好處。其中最重要的是由它提供的快速、成本效益、以及全面的覆蓋率。云端測(cè)試工具能夠讓企業(yè)通過(guò)提供與生產(chǎn)環(huán)境完全相同的、近乎真實(shí)測(cè)試環(huán)境，以節(jié)省大量的時(shí)間和資金。測(cè)試人員只需通過(guò)注冊(cè)，并選擇其用于測(cè)試的真實(shí)設(shè)備，便可開始標(biāo)記bug。

除了速度和成本效益，云端測(cè)試還能夠提供全面的覆蓋率。據(jù)此，測(cè)試團(tuán)隊(duì)和QA經(jīng)理可以更快地實(shí)現(xiàn)更高的準(zhǔn)確性、以及更小的投入等目標(biāo)?？梢哉f(shuō)，云端可視化測(cè)試不但簡(jiǎn)單、快速、實(shí)用，而且能夠提高技術(shù)和業(yè)務(wù)方面的精確程度。就其目前的實(shí)際發(fā)展趨勢(shì)和本身的優(yōu)勢(shì)，我們可以有把握地說(shuō)，未來(lái)各種業(yè)務(wù)關(guān)鍵型軟件的測(cè)試將主要是由基于云端的、高度自動(dòng)化的可視化測(cè)試平臺(tái)來(lái)實(shí)現(xiàn)。

譯者介紹

陳峻 （Julian Chen），51CTO社區(qū)編輯，具有十多年的IT項(xiàng)目實(shí)施經(jīng)驗(yàn)，善于對(duì)內(nèi)外部資源與風(fēng)險(xiǎn)實(shí)施管控，專注傳播網(wǎng)絡(luò)與信息安全知識(shí)與經(jīng)驗(yàn)。

原文標(biāo)題：??Is Visual Comparison Testing the Future????，作者：Vivek Mannotr?