我與無影的初體驗:使用無影雲桌面進行一個開源 Angular 項目的端到端測試


近日很榮幸地收到了阿里雲邀請做一個關於阿里旗下無影雲桌面的評測,從官網上了解到阿里雲無影雲桌面原名為彈性雲桌面,融合了無影產品技術后更名升級,可廣泛應用於具有高數據安全管控、高性能計算等要求的安全辦公、金融、設計、影視、教育等領域。

我是一個程序員,最近一年的工作是參與開發一個開源的電商前端(Storefront)項目,代號 Spartacus,使用的編程語言是 TypeScript,開發框架是 Angular. 這是我們項目的 Github 代碼倉庫:

https://github.com/SAP/spartacus

這是從本地開發環境運行 Spartacus 的一些截圖:

很高興地接受了阿里的評測邀請之后,我就在琢磨:無影雲桌面能否用來提高我日常開發 Spartacus Storefront 的工作效率?

作為一個開源的電商前端應用,Spartacus 有着完善的端到端自動化測試,我們使用自動化測試框架 Cypress 來進行 UI 端到端測試和回歸測試。每次開發人員使用 git 提交代碼更改到 Github 倉庫時,會觸發基於 Travis CI 的持續集成腳本,在 CI 服務器上執行所有的 Cypress 自動化測試用例。

下面是 CI 服務器上運行 Cypress 自動化測試的命令行:

yarn --cwd ./projects/storefrontapp-e2e-cypress run cy:run:ci

在我實際的開發過程中,我不時會遇到這種情況,本地修改了代碼之后,單元測試全部通過,然后提交代碼,發現 CI 服務器上的某些 Cypress 自動化測試用例執行失敗。

因為我們在 Travis CI 上執行的腳本內容較多,build 一次需要花費 40 多分鍾的時間,所以靠在 CI 服務器上執行 Cypress 回歸測試用例的方式來發現本地提交代碼的缺陷,效率實在低下。

因此,我就有了一個想法:把 Spartacus Cypress 自動化測試放到無影雲桌面進行。這樣,每次我在本地修改完代碼之后,如果無影雲桌面里能立即識別到這些代碼修改,並在雲桌面里運行所有的 Cypress 自動化測試,等全部測試都通過后,我再提交代碼。這樣,借助無影雲桌面強大的計算性能,我可以事先把所有可能引起回歸測試失敗的代碼缺陷都檢測出來,這樣能盡可能提高我提交代碼之后,Travis CI build 的一次通過率。

首先我在無影雲桌面里安裝了 Angular 開發必備的開發和構建工具,比如 yarn, npm, Node.js 等。下圖是在雲桌面上使用 Angular CLI 啟動命令行的截圖:

下圖是命令行啟動的 Spartacus Storefront 運行在無影雲桌面的 Chrome 瀏覽器里的截圖,和在本地電腦里運行沒有任何差別:

感謝無影雲桌面強大的磁盤映射功能,我能夠直接在 PC 雲桌面客戶端里,直接通過圖形界面以及命令行的方式,訪問到我本地操作系統 C 盤的數據。下圖的本地磁盤 C:DESKTOP-IC6UIET 圖標, 代表的就是我本地計算機的 C 盤。

通過 UNC 地址:\Client\C$\Code,可以在無影雲桌面 powershell 命令行里訪問本地操作系統 C 盤下的數據,命令行操作方式同在本地電腦使用沒有任何區別:

如果在無影雲桌面里可以直接用命令行啟動我本地電腦 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 直接將發生修改的文件,從本機目錄拷貝到雲桌面即可。

在無影雲桌面里使用如下的 powershell script, 即可將本地修改的文件自動同步到雲桌面的本地目錄:

$sourcePath = "Z:\Code\SPA\spartacus";
$targetPath = "C:\code\spa\spartacus-develop";
$modifiedFilesList = "C:\code\spa\modifiedFilesList.txt";

function syncFile {
    $modifiedFiles = Get-Content $modifiedFilesList

    foreach($file in $modifiedFiles) {
        echo $file;
        Copy-Item $file -Destination $targetPath;
    }
    echo "done";
}

git ls-files -m > $modifiedFilesList;
syncFile;

然后就可以在無影雲桌面里啟動 Cypress 了。雖然可以采取默認的 headless 方式運行所有回歸測試用例,但既然雲桌面提供了顯示桌面,不利用起來有點可惜,所以我選擇了以交互式方式運行 Cypress.

順利的在無影雲桌面上打開了 Cypress 的交互式運行桌面:

在無影雲桌面里非常流暢地完成了 Cypress 的回歸測試,並且在非 headless 模式下,能夠直觀地觀察到當測試用例執行失敗時,當前應用的 UI 界面,非常方便定位問題。

關於在無影雲桌面里執行 Cypress 回歸測試的動態效果,可以查看我這個視頻。

https://www.zhihu.com/zvideo/1466527639535706113

選擇在無影雲桌面而不是本地運行 Cypress 回歸測試,我主要基於以下幾點考慮:

(1) 節省本地寶貴的 CPU 和內存資源,用於執行一些技術附加值更高的非技術工作。
(2) 利用無影雲桌面的手機客戶端,我可以做到即使人不在電腦面前,也能隨時監控 Cypress 測試的執行結果。

下面的截圖是通過 Android 客戶端登錄到無影雲桌面的截圖:

可以看到在手機上查看 Cypress 的執行結果還是非常方便的:

如果覺得手機屏幕過小,看不清楚顯示的內容,雲桌面的手機客戶端貼心地提供了修改顯示分辨率的功能:

選擇自動適應屏幕后,就會按照手機的實際屏幕尺寸,動態調整桌面的顯示效果,便於在手機客戶端上完成一些簡單的雲桌面操作。

綜上所述,這算是一次讓我滿意的通過無影雲桌面提高我日常工作效率的體驗之旅。后續我在 Angular 開發工作中,還會繼續留意,考慮是否有更多的開發步驟,能夠遷移到雲桌面里完成。這里也感謝阿里推出的這款如此優秀的雲桌面產品,在全球疫情的大環境下,給大家的遠程工作帶來了更多的便利。

更多Jerry的原創文章,盡在:"汪子熙":


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM