我与无影的初体验：使用无影云桌面进行一个开源 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 $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 模式下，能够直观地观察到当测试用例执行失败时，当前应用的 UI 界面，非常方便定位问题。

关于在无影云桌面里执行 Cypress 回归测试的动态效果，可以查看我这个视频。

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

选择在无影云桌面而不是本地运行 Cypress 回归测试，我主要基于以下几点考虑：

(1) 节省本地宝贵的 CPU 和内存资源，用于执行一些技术附加值更高的非技术工作。
(2) 利用无影云桌面的手机客户端，我可以做到即使人不在电脑面前，也能随时监控 Cypress 测试的执行结果。

下面的截图是通过 Android 客户端登录到无影云桌面的截图：

可以看到在手机上查看 Cypress 的执行结果还是非常方便的：

如果觉得手机屏幕过小，看不清楚显示的内容，云桌面的手机客户端贴心地提供了修改显示分辨率的功能：

选择自动适应屏幕后，就会按照手机的实际屏幕尺寸，动态调整桌面的显示效果，便于在手机客户端上完成一些简单的云桌面操作。

综上所述，这算是一次让我满意的通过无影云桌面提高我日常工作效率的体验之旅。后续我在 Angular 开发工作中，还会继续留意，考虑是否有更多的开发步骤，能够迁移到云桌面里完成。这里也感谢阿里推出的这款如此优秀的云桌面产品，在全球疫情的大环境下，给大家的远程工作带来了更多的便利。

更多Jerry的原创文章，尽在：“汪子熙”:

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

Flutter初体验（二）—— 创建第一个Flutter APP
Flutter初体验(二)--- 创建第一个Flutter APP 在第一篇文章 Flutter初体验(一)---Mac 安装配置,学习了配置 Flutter 开发环境,并运行了Demo项目,本篇根据 ...
华为云会议初体验【华为云至简致远】
[摘要] 现代社会的工作节奏很快,为了更好的工作,团队之间需要不断的通过开会去交流问题,而随着疫情的到来,线上开会越来越多,团队之间需要提高沟通效率,快速沟通.并且需要开的"突袭式会议&qu ...
Serverless 初体验：快速开发与部署一个Hello World（Java版）
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 昨天被阿里云的这个酷炫大屏吸引了! 我等85后开发者居然 ...
MapReduce初体验——统计指定文本文件中每一个单词出现的总次数
相信小伙伴们看了小菌上一篇博客<什么是MapReduce(入门篇)>后,对MapReduce的概念有了更深的认知!本篇博客,小菌为大家带来的则是MapReduce的实战--统计指定文本文件 ...
MQTT初体验-百度智能云
说明: 该文章记录了基于百度智能云MQTT服务器的测试使用过程,方便以后查阅. MQTT协议中文版下载 https://legacy.gitbook.com/book/mcxiaoke/mqtt-cn ...
ES6 Generator 初体验
2019独角兽企业重金招聘Python工程师标准>>> ES6 Generator 初体验听说 ES6 的 Generator 是一个很神奇的函数,所以去了解了一下. 因为它不同于 ...
搜索引擎核心技术与算法 —— 倒排索引初体验
今天开启一个新篇章--智能搜索与NLP.本篇章将由羸弱菜鸡小Q和大家一同学习与智能搜索相关的知识和技术,希望能和大家一同学习与进步,冲鸭!! 这里首先区分两个概念:搜索和检索检索:数据库时代的概念, ...
day21—AngularJS学习初体验
转行学开发,代码100天--2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍好吧,Angular学习起来非常简单,哈哈,现在就 ...
sentinel接入网关应用_微服务初体验（三）：集成Gateway网关和Sentinel限流
前言最近笔者在对微服务架构进行学习,参考了各种项目的技术文章.框架文档以及视频网站,最终选择使用Nacos+Dubbo+Gateway+Sentinel来搭建一个项目练手.其中Nacos作为服务的注 ...

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

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

最新文章

热门文章