自定义 UI 测试是一项可选功能,可用于为应用程序创建和自动运行 UI 测试。
AEM 提供了 Cloud Manager 质量关卡集成包,确保对自定义应用程序的顺利更新。 特别是,IT 测试门已支持使用 AEM API 创建和自动化定制测试。
UI測試會封裝在Docker影像中,以便在語言和架構(例如Cypress、Selenium、Java和Maven以及JavaScript)中提供廣泛的選擇。 此外,还可使用 AEM 项目原型轻松地生成 UI 测试项目。
Adobe鼓勵使用Cypress,因為它提供即時重新載入和自動等待,有助於在測試期間節省時間並提高生產力。 Cypress也提供簡單且直覺式的語法,讓您輕鬆學習及使用,即使是新手也不例外。
按照生产管道或非生产管道(可选)中的自定义 UI 测试步骤,作为每个 Cloud Manager 管道的特定质量关卡的一部分执行 UI 测试。包括回歸和新功能在內的任何UI測試都可以檢測和報告錯誤。
与自定义功能测试(用 Java 编写的 HTTP 测试)不同,UI 测试可以是 Docker 映像,其中包含用任何语言编写的测试,只要它们遵循构建 UI 测试一节中定义的约定。
Adobe建議使用Cypress進行UI測試,遵循 AEM測試範例存放庫.
Adobe也提供以JavaScript搭配WebdriverIO為基礎的UI測試模組範例(請參閱 AEM專案原型)和具有WebDriver的Java (請參閱 AEM測試範例存放庫)。
此部分介绍了设置 UI 测试以在 Cloud Manager 中执行所需的步骤。
确定要使用的编程语言。
對於Cypress,請使用以下程式碼的範例: AEM測試範例存放庫.
对于 JavaScript 和 WDIO,请使用自动在 Cloud Manager 存储库的 ui.tests
文件夹中生成的示例代码。
如果在 Cloud Manager 自动创建的 ui.tests
文件夹之前创建您的存储库,则也可使用 AEM 项目原型生成最新版本。
对于 Java 和 WebDriver,请使用来自 AEM 测试示例存储库的示例代码。
对于其他编程语言,请参阅本文档中的构建 UI 测试部分以设置测试项目。
确保根据本文档的客户选择启用部分中的说明操作来激活 UI 测试。
開發您的測試案例和 在本機執行測試.
将代码提交到 Cloud Manager 存储库并执行 Cloud Manager 管道。
Maven 项目生成 Docker 构建上下文。 此 Docker 构建上下文描述了如何创建包含 UI 测试的 Docker 映像,Cloud Manager 将使用它生成包含实际 UI 测试的 Docker 映像。
此部分介绍将 UI 测试项目添加到存储库所需的步骤。
如果您对编程语言没有特殊要求,AEM 项目原型会为您生成符合以下说明的 UI 测试项目。
要生成Docker構建上下文,您需要一個Maven模組:
Dockerfile
以及用测试构建 Docker 映像所需的其他所有文件。ui-test-docker-context
分类器标记档案。最简单的方法是配置 Maven Assembly 插件创建 Docker 构建上下文档案并为其分配正确的分类器。
您可以使用不同的技术和框架构建 UI 测试,但本节假设您的项目的布局方式与以下类似。
├── Dockerfile
├── assembly-ui-test-docker-context.xml
├── pom.xml
├── test-module
│ ├── package.json
│ ├── index.js
│ └── wdio.conf.js
└── wait-for-grid.sh
pom.xml
文件负责 Maven 构建。 将执行添加到 Maven Assembly 插件,如下所示。
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-assembly-plugin</artifactId>
<configuration>
<descriptors>
<descriptor>${project.basedir}/assembly-ui-test-docker-context.xml</descriptor>
</descriptors>
<tarLongFileMode>gnu</tarLongFileMode>
</configuration>
<executions>
<execution>
<id>make-assembly</id>
<phase>package</phase>
<goals>
<goal>single</goal>
</goals>
</execution>
</executions>
</plugin>
此执行指示 Maven Assembly 插件根 assembly-ui-test-docker-context.xml
上下文中包含的指令创建档案,在插件的行话中称为Assembly 描述符。 Assembly 描述符列出了必须作为档案的一部分的所有文件。
<assembly>
<id>ui-test-docker-context</id>
<includeBaseDirectory>false</includeBaseDirectory>
<formats>
<format>tar.gz</format>
</formats>
<fileSets>
<fileSet>
<directory>${basedir}</directory>
<includes>
<include>Dockerfile</include>
<include>wait-for-grid.sh</include>
</includes>
</fileSet>
<fileSet>
<directory>${basedir}/test-module</directory>
<excludes>
<exclude>node/**</exclude>
<exclude>node_modules/**</exclude>
<exclude>reports/**</exclude>
</excludes>
</fileSet>
</fileSets>
</assembly>
Assembly 描述符指示插件创建 .tar.gz
类型的档案,并将 ui-test-docker-context
分类器分配给它。 此外,它还列出了必须包含在档案中的文件,包括以下内容。
Dockerfile
wait-for-grid.sh
脚本,其用途如下所述test-module
文件夹中的 Node.js 项目实现Assembly 描述符还排除了在本地运行 UI 测试时可能生成的一些文件。 这保证了更小的档案和更快的构建。
Cloud Manager 会自动拾取包含 Docker 构建上下文的档案,它将在部署管道期间构建包含测试的 Docker 映像。最终,Cloud Manager 将运行 Docker 映像,对应用程序执行 UI 测试。
构建应该生成零或一个档案。 如果它生成零个档案,则默认通过测试步骤。 如果构建生成多个档案,那么选择哪个档案是不确定的。
若要讓Cloud Manager建置和執行UI測試,您必須透過將檔案新增到存放庫來選擇使用此功能。
testing.properties
。ui-tests.version=1
。pom.xml
文件旁边的 maven 子模块下。tar.gz
文件的根目录下。如果此文件不存在,将跳过 UI 测试生成和执行。
要在构建工件中包含 testing.properties
文件,请在 assembly-ui-test-docker-context.xml
文件中添加 include
语句。
[...]
<includes>
<include>Dockerfile</include>
<include>wait-for-grid.sh</include>
<include>testing.properties</include> <!-- opt-in test module in Cloud Manager -->
</includes>
[...]
如果您的项目不包括此行,则需要编辑该文件并选择进行 UI 测试。
文件可能包含行,建议不要编辑它。 這是因為它是在引入選擇加入UI測試之前引入到您的專案中的,並且客戶端不打算編輯該檔案。 可放心忽略。
如果您使用的是 Adobe 提供的示例:
对于从 AEM 项目原型生成的基于 JavaScript 的 ui.tests
文件夹,您可以执行以下命令来添加所需的配置。
echo "ui-tests.version=1" > testing.properties
if ! grep -q "testing.properties" "assembly-ui-test-docker-context.xml"; then
awk -v line=' <include>testing.properties</include>' '/<include>wait-for-grid.sh<\/include>/ { printf "%s\n%s\n", $0, line; next }; 1' assembly-ui-test-docker-context.xml > assembly-ui-test-docker-context.xml.new && mv assembly-ui-test-docker-context.xml.new assembly-ui-test-docker-context.xml
fi
Adobe提供的Cypress和Java Selenium測試範例已設定選擇加入旗標。
本节描述包含 UI 测试的 Docker 映像必须遵循的惯例。 Docker 映像是根据上一节所述 Docker 构建上下文构建的。
根据您的框架,以下环境变量将在运行时传递给 Docker 映像。
变量 | 示例 | 描述 | 测试框架 |
---|---|---|---|
SELENIUM_BASE_URL |
http://my-ip:4444 |
Selenium 服务器的 URL | 仅 Selenium |
SELENIUM_BROWSER |
chrome |
Selenium 服务器使用的浏览器实施 | 仅 Selenium |
AEM_AUTHOR_URL |
http://my-ip:4502/context-path |
AEM 创作实例的 URL | 所有 |
AEM_AUTHOR_USERNAME |
admin |
用于登录 AEM 创作实例的用户名 | 所有 |
AEM_AUTHOR_PASSWORD |
admin |
用于登录 AEM 创作实例的密码 | 所有 |
AEM_PUBLISH_URL |
http://my-ip:4503/context-path |
AEM 发布实例的 URL | 所有 |
AEM_PUBLISH_USERNAME |
admin |
用于登录 AEM 发布实例的用户名 | 所有 |
AEM_PUBLISH_PASSWORD |
admin |
用于登录 AEM 发布实例的密码 | 所有 |
REPORTS_PATH |
/usr/src/app/reports |
必须将测试结果的 XML 报告保存到的路径 | 所有 |
UPLOAD_URL |
http://upload-host:9090/upload |
为使测试框架可访问文件而必须将文件上传到的 URL | 所有 |
Adobe 测试示例提供了帮助程序函数来访问配置参数:
Cypress.env('VARIABLE_NAME')
Docker 映像必须以 JUnit XML 格式生成测试报告,并将其保存在环境变量 REPORTS_PATH
指定的路径中。JUnit XML格式是一種廣泛使用的報告測試結果的格式。 如果 Docker 映像使用 Java 和 Maven,则诸如 Maven Surefire 插件和 Maven Failsafe 插件等标准测试模块可以立即生成此类报告。
如果 Docker 映像是用其他编程语言或测试运行程序实现的,请查看文档,了解如何生成 JUnit XML 报告。
仅根据测试报告评估 UI 测试步骤的结果。请确保为您的测试执行生成相应报告。
使用断言而不是仅仅将错误记录到 STDERR 或返回非零退出代码,否则,您的部署管道可能会正常进行。
要从本地计算机中运行功能测试,请创建一个具有类似管理员权限的用户来执行相同的行为。
类型 | 价值 | 描述 |
---|---|---|
CPU | 2.0 | 每次执行测试保留的 CPU 时间量 |
内存 | 1Gi | 配置給測試的記憶體數量,以GB為單位的值 |
超时 | 30m | 测试将终止的持续时间。 |
推荐持续时间 | 15m | Adobe建議撰寫測試的時間不要超過這個時間。 |
若您需要更多資源,請建立客戶服務案例並描述您的使用案例;Adobe將稽核您的請求並提供適當的協助。
仅在 Selenium 为所选的测试基础设施时适用此部分。
在测试开始之前,Docker 映像负责确保 Selenium 服务器启动并运行。 等待 Selenium 服务需要两个步骤。
SELENIUM_BASE_URL
环境变量中读取 Selenium 服务的 URL。一旦 Selenium 的状态端点得到肯定响应,测试就可以开始了。
Adobe UI 测试示例使用脚本 wait-for-grid.sh
执行此工作,该脚本在 Docker 启动时执行,并且仅在网格准备就绪后才开始实际测试执行。
Docker映像可能會產生額外的測試輸出(例如,熒幕擷圖或影片),並將其儲存在環境變數指定的路徑中 REPORTS_PATH
. 测试结果存档中包括任何可在 REPORTS_PATH
下找到的文件。
默认情况下,Adobe 提供的测试示例将为任何失败的测试创建屏幕快照。
您可以使用辅助程序函数通过测试创建屏幕快照。
如果在执行 UI 测试期间创建了测试结果存档,则可使用自定义 UI 测试步骤下的 Download Details
按钮从 Cloud Manager 下载该存档。
测试有时必须将文件上载到正在测试的应用程序。 為了使Selenium的部署相對於您的測試保持靈活,不能直接將資產直接上傳到Selenium。 相反,上载文件需要以下步骤。
UPLOAD_URL
环境变量指定的 URL 处上载文件。
curl -X POST ${UPLOAD_URL} -F "data=@file.txt"
。200 OK
响应,响应类型为 text/plain
。
<input>
元素中的文件路径来测试应用程序中的文件上载。在 Cloud Manager 管道中激活 UI 测试之前,建议在本地对 AEM as a Cloud Service SDK 或实际的 AEM as a Cloud Service 实例中运行 UI 测试。
打开 shell 并导航到存储库中的 ui.tests/test-module
文件夹
安裝Cypress和其他必要條件
npm install
設定測試執行所需的環境變數
export AEM_AUTHOR_URL=https://author-<program-id>-<environment-id>.adobeaemcloud.com
export AEM_AUTHOR_USERNAME=<user>
export AEM_AUTHOR_PASSWORD=<password>
export AEM_PUBLISH_URL=https://publish-<program-id>-<environment-id>.adobeaemcloud.com
export AEM_PUBLISH_USERNAME=<user>
export AEM_PUBLISH_PASSWORD=<password>
export REPORTS_PATH=target/
使用下列其中一個命令執行測試
npm test # Using default Cypress browser
npm run test-chrome # Using Google Chrome browser
npm run test-firefox # Using Firefox browser
日志文件将存储在存储库的 target/
文件夹中。
如需詳細資訊,請參閱 AEM測試範例存放庫.
打开 shell 并导航到存储库中的 ui.tests
文件夹
执行以下命令以使用 Maven 启动测试
mvn verify -Pui-tests-local-execution \
-DAEM_AUTHOR_URL=https://author-<program-id>-<environment-id>.adobeaemcloud.com \
-DAEM_AUTHOR_USERNAME=<user> \
-DAEM_AUTHOR_PASSWORD=<password> \
-DAEM_PUBLISH_URL=https://publish-<program-id>-<environment-id>.adobeaemcloud.com \
-DAEM_PUBLISH_USERNAME=<user> \
-DAEM_PUBLISH_PASSWORD=<password>
target/reports
文件夹中如需詳細資訊,請參閱 AEM專案原型存放庫.
打开 shell 并导航到存储库中的 ui.tests/test-module
文件夹
執行以下命令以使用Maven啟動測試
# Start selenium docker image (for x64 CPUs)
docker run --platform linux/amd64 -d -p 4444:4444 selenium/standalone-chrome-debug:latest
# Start selenium docker image (for ARM CPUs)
docker run -d -p 4444:4444 seleniarm/standalone-chromium
# Run the tests using the previously started Selenium instance
mvn verify -Pui-tests-local-execution -DSELENIUM_BASE_URL=http://<server>:4444
日志文件将存储在存储库的 target/reports
文件夹中。
如需詳細資訊,請參閱 AEM測試範例存放庫.