分享

我与无影的初体验:使用无影云桌面进行一个开源 Angular 项目的端到端测试

 汪子熙 2022-02-15

近日很荣幸地收到了阿里云邀请做一个关于阿里旗下无影云桌面的评测,从官网上了解到阿里云无影云桌面原名为弹性云桌面,融合了无影产品技术后更名升级,可广泛应用于具有高数据安全管控、高性能计算等要求的安全办公、金融、设计、影视、教育等领域。

我是一个程序员,最近一年的工作是参与开发一个开源的电商前端(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 开发工作中,还会继续留意,考虑是否有更多的开发步骤,能够迁移到云桌面里完成。这里也感谢阿里推出的这款如此优秀的云桌面产品,在全球疫情的大环境下,给大家的远程工作带来了更多的便利。

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章