我与无影的初体验:使用无影云桌面进行一个开源 Angular 项目的端到端测试
近日很榮幸地收到了阿里云邀請做一個關于阿里旗下無影云桌面的評測,從官網上了解到阿里云無影云桌面原名為彈性云桌面,融合了無影產品技術后更名升級,可廣泛應用于具有高數據安全管控、高性能計算等要求的安全辦公、金融、設計、影視、教育等領域。
我是一個程序員,最近一年的工作是參與開發(fā)一個開源的電商前端(Storefront)項目,代號 Spartacus,使用的編程語言是 TypeScript,開發(fā)框架是 Angular. 這是我們項目的 Github 代碼倉庫:
https://github.com/SAP/spartacus
這是從本地開發(fā)環(huán)境運行 Spartacus 的一些截圖:
很高興地接受了阿里的評測邀請之后,我就在琢磨:無影云桌面能否用來提高我日常開發(fā) Spartacus Storefront 的工作效率?
作為一個開源的電商前端應用,Spartacus 有著完善的端到端自動化測試,我們使用自動化測試框架 Cypress 來進行 UI 端到端測試和回歸測試。每次開發(fā)人員使用 git 提交代碼更改到 Github 倉庫時,會觸發(fā)基于 Travis CI 的持續(xù)集成腳本,在 CI 服務器上執(zhí)行所有的 Cypress 自動化測試用例。
下面是 CI 服務器上運行 Cypress 自動化測試的命令行:
yarn --cwd ./projects/storefrontapp-e2e-cypress run cy:run:ci
在我實際的開發(fā)過程中,我不時會遇到這種情況,本地修改了代碼之后,單元測試全部通過,然后提交代碼,發(fā)現(xiàn) CI 服務器上的某些 Cypress 自動化測試用例執(zhí)行失敗。
因為我們在 Travis CI 上執(zhí)行的腳本內容較多,build 一次需要花費 40 多分鐘的時間,所以靠在 CI 服務器上執(zhí)行 Cypress 回歸測試用例的方式來發(fā)現(xiàn)本地提交代碼的缺陷,效率實在低下。
因此,我就有了一個想法:把 Spartacus Cypress 自動化測試放到無影云桌面進行。這樣,每次我在本地修改完代碼之后,如果無影云桌面里能立即識別到這些代碼修改,并在云桌面里運行所有的 Cypress 自動化測試,等全部測試都通過后,我再提交代碼。這樣,借助無影云桌面強大的計算性能,我可以事先把所有可能引起回歸測試失敗的代碼缺陷都檢測出來,這樣能盡可能提高我提交代碼之后,Travis CI build 的一次通過率。
首先我在無影云桌面里安裝了 Angular 開發(fā)必備的開發(fā)和構建工具,比如 yarn, npm, Node.js 等。下圖是在云桌面上使用 Angular CLI 啟動命令行的截圖:
下圖是命令行啟動的 Spartacus Storefront 運行在無影云桌面的 Chrome 瀏覽器里的截圖,和在本地電腦里運行沒有任何差別:
感謝無影云桌面強大的磁盤映射功能,我能夠直接在 PC 云桌面客戶端里,直接通過圖形界面以及命令行的方式,訪問到我本地操作系統(tǒng) C 盤的數據。下圖的本地磁盤 C:DESKTOP-IC6UIET 圖標, 代表的就是我本地計算機的 C 盤。
通過 UNC 地址:\Client\C$\Code,可以在無影云桌面 powershell 命令行里訪問本地操作系統(tǒng) C 盤下的數據,命令行操作方式同在本地電腦使用沒有任何區(qū)別:
如果在無影云桌面里可以直接用命令行啟動我本地電腦 C 盤的 Spartacus 應用,那就是最理想的情況了。于是我使用命令行,將本地電腦的 UNC 路徑 \Client\C$, 映射成無影云桌面里的 Z 盤:
net use Z: \Client\C$\
然后在云桌面里打開 powershell,進入 Z 盤,使用 Angular CLI 的 ng serve 命令啟動 Spartacus:
然而等待了很長時間后,仍然沒有看到 ng serve 命令的輸出。同無影云桌面的支持人員溝通過,得知這種直接在云桌面里運行本機應用的場景不被支持。
不過問題也不大,我在云桌面里使用 git 將 Spartacus 源代碼克隆到云桌面的本地目錄 C:\code\spa\spartacus-develop,然后每次我的本機目錄 Z:\Code\SPA\spartacus 有代碼修改時,使用一個 powershell script 直接將發(fā)生修改的文件,從本機目錄拷貝到云桌面即可。
在無影云桌面里使用如下的 powershell script, 即可將本地修改的文件自動同步到云桌面的本地目錄:
$sourcePath = "Z:\Code\SPA\spartacus"; $targetPath = "C:\code\spa\spartacus-develop"; $modifiedFilesList = "C:\code\spa\modifiedFilesList.txt";function syncFile {$modifiedFiles = Get-Content $modifiedFilesListforeach($file in $modifiedFiles) {echo $file;Copy-Item $file -Destination $targetPath;}echo "done"; }git ls-files -m > $modifiedFilesList; syncFile;然后就可以在無影云桌面里啟動 Cypress 了。雖然可以采取默認的 headless 方式運行所有回歸測試用例,但既然云桌面提供了顯示桌面,不利用起來有點可惜,所以我選擇了以交互式方式運行 Cypress.
順利的在無影云桌面上打開了 Cypress 的交互式運行桌面:
在無影云桌面里非常流暢地完成了 Cypress 的回歸測試,并且在非 headless 模式下,能夠直觀地觀察到當測試用例執(zhí)行失敗時,當前應用的 UI 界面,非常方便定位問題。
關于在無影云桌面里執(zhí)行 Cypress 回歸測試的動態(tài)效果,可以查看我這個視頻。
https://www.zhihu.com/zvideo/1466527639535706113
選擇在無影云桌面而不是本地運行 Cypress 回歸測試,我主要基于以下幾點考慮:
(1) 節(jié)省本地寶貴的 CPU 和內存資源,用于執(zhí)行一些技術附加值更高的非技術工作。
(2) 利用無影云桌面的手機客戶端,我可以做到即使人不在電腦面前,也能隨時監(jiān)控 Cypress 測試的執(zhí)行結果。
下面的截圖是通過 Android 客戶端登錄到無影云桌面的截圖:
可以看到在手機上查看 Cypress 的執(zhí)行結果還是非常方便的:
如果覺得手機屏幕過小,看不清楚顯示的內容,云桌面的手機客戶端貼心地提供了修改顯示分辨率的功能:
選擇自動適應屏幕后,就會按照手機的實際屏幕尺寸,動態(tài)調整桌面的顯示效果,便于在手機客戶端上完成一些簡單的云桌面操作。
綜上所述,這算是一次讓我滿意的通過無影云桌面提高我日常工作效率的體驗之旅。后續(xù)我在 Angular 開發(fā)工作中,還會繼續(xù)留意,考慮是否有更多的開發(fā)步驟,能夠遷移到云桌面里完成。這里也感謝阿里推出的這款如此優(yōu)秀的云桌面產品,在全球疫情的大環(huán)境下,給大家的遠程工作帶來了更多的便利。
更多Jerry的原創(chuàng)文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的我与无影的初体验:使用无影云桌面进行一个开源 Angular 项目的端到端测试的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ID设计绝了!小米13 Pro摘得202
- 下一篇: 当贝盒子H3视频评测:百元入门也能畅看8