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

我是一個程式設計師，最近一年的工作是參與開發一個開源的電商前端(Storefront)專案，代號 Spartacus，使用的程式語言是 TypeScript，開發框架是 Angular. 這是我們專案的 Github 程式碼倉庫：

https://github.com/SAP/spartacus

這是從本地開發環境執行 Spartacus 的一些截圖：
![](https://img-blog.csdnimg.cn/img_convert/ffdfcd76010a11eeb7618bf107ca4d2f.png)

![](https://img-blog.csdnimg.cn/img_convert/13113d2f7523a14836f321951d265571.png)

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

作為一個開源的電商前端應用，Spartacus 有著完善的端到端自動化測試，我們使用自動化測試框架 Cypress 來進行 UI 端到端測試和迴歸測試。每次開發人員使用 git 提交程式碼更改到 Github 倉庫時，會觸發基於 Travis CI 的持續整合指令碼，在 CI 伺服器上執行所有的 Cypress 自動化測試用例。

下面是 CI 伺服器上執行 Cypress 自動化測試的命令列：

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

![](https://img-blog.csdnimg.cn/img_convert/52977fe8bf1dfded0225c7377151a343.png)

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

![](https://img-blog.csdnimg.cn/img_convert/e4aebbd0044f4ef319010633fab85ef2.png)

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

因此，我就有了一個想法：把 Spartacus Cypress 自動化測試放到無影雲桌面進行。這樣，每次我在本地修改完程式碼之後，如果無影雲桌面裡能立即識別到這些程式碼修改，並在雲桌面裡執行所有的 Cypress 自動化測試，等全部測試都透過後，我再提交程式碼。這樣，藉助無影雲桌面強大的計算效能，我可以事先把所有可能引起迴歸測試失敗的程式碼缺陷都檢測出來，這樣能儘可能提高我提交程式碼之後，Travis CI build 的一次透過率。

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

![](https://img-blog.csdnimg.cn/img_convert/55da3576686686b862ffeea104bba4bc.png)

下圖是命令列啟動的 Spartacus Storefront 執行在無影雲桌面的 Chrome 瀏覽器裡的截圖，和在本地電腦裡執行沒有任何差別：
![](https://img-blog.csdnimg.cn/img_convert/6a9bee868523548c0a3d8d7a4d918387.png)

感謝無影雲桌面強大的磁碟對映功能，我能夠直接在 PC 雲桌面客戶端裡，直接透過圖形介面以及命令列的方式，訪問到我本地作業系統 C 盤的資料。下圖的本地磁碟 C：DESKTOP-IC6UIET 圖示, 代表的就是我本地計算機的 C 盤。

![](https://img-blog.csdnimg.cn/img_convert/4ad39856fe2828fdea244b5bdeff6b1c.png)

透過 UNC 地址：\\Client\C$\Code，可以在無影雲桌面 powershell 命令列裡訪問本地作業系統 C 盤下的資料，命令列操作方式同在本地電腦使用沒有任何區別：

![](https://img-blog.csdnimg.cn/img_convert/df5608c7682ed6ad2767beb2203aac21.png)

![](https://img-blog.csdnimg.cn/img_convert/141afc5e49b9e25ea0c5c1547b9d1ef3.png)

如果在無影雲桌面裡可以直接用命令列啟動我本地電腦 C 盤的 Spartacus 應用，那就是最理想的情況了。於是我使用命令列，將本地電腦的 UNC 路徑 \\Client\C$, 對映成無影雲桌面裡的 Z 盤：

net use Z: \\Client\C$\

![](https://img-blog.csdnimg.cn/img_convert/bbb70207ef17982a9f94deacd1987659.png)

![](https://img-blog.csdnimg.cn/img_convert/ecdf9abc63be17a0c042f06cc3ac75f7.png)

然後在雲桌面裡開啟 powershell，進入 Z 盤，使用 Angular CLI 的 ng serve 命令啟動 Spartacus：

![](https://img-blog.csdnimg.cn/img_convert/5ebba11186b561f049193b0c74442cd2.png)

然而等待了很長時間後，仍然沒有看到 ng serve 命令的輸出。同無影雲桌面的支援人員溝透過，得知這種直接在雲桌面裡執行本機應用的場景不被支援。

不過問題也不大，我在雲桌面裡使用 git 將 Spartacus 原始碼克隆到雲桌面的本地目錄 C:\code\spa\spartacus-develop，然後每次我的本機目錄 Z:\Code\SPA\spartacus 有程式碼修改時，使用一個 powershell script 直接將發生修改的檔案，從本機目錄複製到雲桌面即可。

在無影雲桌面裡使用如下的 powershell script, 即可將本地修改的檔案自動同步到雲桌面的本地目錄：

```shell
$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;
```

![](https://img-blog.csdnimg.cn/img_convert/7bcaffdfc36c0a2c1fcc3533539c5995.png)

然後就可以在無影雲桌面裡啟動 Cypress 了。雖然可以採取預設的 headless 方式執行所有迴歸測試用例，但既然雲桌面提供了顯示桌面，不利用起來有點可惜，所以我選擇了以互動式方式執行 Cypress.

順利的在無影雲桌面上開啟了 Cypress 的互動式執行桌面：
![](https://img-blog.csdnimg.cn/img_convert/ce14574ab07108e5c1c247daf0c0b548.png)

在無影雲桌面裡非常流暢地完成了 Cypress 的迴歸測試，並且在非 headless 模式下，能夠直觀地觀察到當測試用例執行失敗時，當前應用的 UI 介面，非常方便定位問題。
![](https://img-blog.csdnimg.cn/img_convert/b5c24f0fbd81e2cc633df0015cdadd52.png)

關於在無影雲桌面裡執行 Cypress 迴歸測試的動態效果，可以檢視我這個影片。

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

選擇在無影雲桌面而不是本地執行 Cypress 迴歸測試，我主要基於以下幾點考慮：

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

下面的截圖是透過 Android 客戶端登入到無影雲桌面的截圖：

![](https://img-blog.csdnimg.cn/img_convert/291cf44d623be053539aa3cad8a5c154.png)

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

![](https://img-blog.csdnimg.cn/img_convert/9002a9b79f014062df19e8c238f45e44.png)

如果覺得手機螢幕過小，看不清楚顯示的內容，雲桌面的手機客戶端貼心地提供了修改顯示解析度的功能：

![](https://img-blog.csdnimg.cn/img_convert/9be847cbb0086dde999f0ec7eba3950a.png)

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

![](https://img-blog.csdnimg.cn/img_convert/7e3773eeff11344043b9ac7071680f03.png)

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

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

相關文章