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

本文涉及的产品
无影云电脑企业版,4核8GB 120小时 1个月
无影云电脑企业版,4核8GB 120小时 1个月
简介: 一个 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 开发工作中,还会继续留意,考虑是否有更多的开发步骤,能够迁移到云桌面里完成。这里也感谢阿里推出的这款如此优秀的云桌面产品,在全球疫情的大环境下,给大家的远程工作带来了更多的便利。

相关文章
|
25天前
|
测试技术 Android开发 iOS开发
Appium 是一个开源的自动化测试框架,它支持多种平台和多种编程语言
Appium是一款开源自动化测试框架,支持iOS和Android多平台及多种编程语言。通过WebDriver协议,开发者可编写自动化测试脚本。在iPhone上实现屏幕点击等操作需安装Appium及其依赖,启动服务器,并设置所需的测试环境参数。利用Python等语言编写测试脚本,模拟用户交互行为,最后运行测试脚本来验证应用功能。对于iPhone测试,需准备真实设备或Xcode模拟器。
59 1
|
1月前
|
运维 Kubernetes 监控
|
14天前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `<p:inputText>` 和 `<p:calendar>` 等组件创建用户表单,并用 `<p:dataTable>` 展示数据集合,提升 JSF 应用的易用性和开发效率。
23 0
|
14天前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
27 0
|
14天前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
34 0
|
14天前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
28 0
|
14天前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
25 0
|
15天前
|
存储 前端开发 JavaScript
"Angular与AWS Amplify的神奇之处:如何用云端连接技术让你的项目一鸣惊人?"
【8月更文挑战第31天】在现代软件开发中,云端连接的前端应用已成为主流。本文探讨了Angular与AWS Amplify的结合,展示了如何通过示例代码快速构建云端连接的前端应用。Angular是由Google支持的开源前端框架,而AWS Amplify是AWS提供的云服务,两者结合可以快速构建云端连接的前端应用。文中还分享了一些最佳实践,帮助开发者更高效地使用这两种技术构建高性能的云端连接的前端应用。随着Angular和AWS Amplify生态的不断成熟,它们将在未来的Web开发中扮演更加重要的角色。
25 0
|
2月前
|
Java jenkins 持续交付
Jenkins是开源CI/CD工具,用于自动化Java项目构建、测试和部署。通过配置源码管理、构建触发器、执行Maven目标,实现代码提交即触发构建和测试
【7月更文挑战第1天】Jenkins是开源CI/CD工具,用于自动化Java项目构建、测试和部署。通过配置源码管理、构建触发器、执行Maven目标,实现代码提交即触发构建和测试。成功后,Jenkins执行部署任务,发布到服务器或云环境。使用Jenkins能提升效率,保证软件质量,加速上线,并需维护其稳定运行。
96 0
|
3月前
|
NoSQL 关系型数据库 MySQL
软件测试之【基于开源商城系统fecmall功能测试项目实例】
软件测试之【基于开源商城系统fecmall功能测试项目实例】
143 0
软件测试之【基于开源商城系统fecmall功能测试项目实例】