UI 测试

自定义 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 测试一节中定义的约定。

开始使用 UI 测试

此部分介绍了设置 UI 测试以在 Cloud Manager 中执行所需的步骤。

1. 确定要使用的编程语言。

   • 對於Cypress，請使用以下程式碼的範例： AEM測試範例存放庫.

   • 对于 JavaScript 和 WDIO，请使用自动在 Cloud Manager 存储库的 ui.tests 文件夹中生成的示例代码。

     注意

     如果在 Cloud Manager 自动创建的 ui.tests 文件夹之前创建您的存储库，则也可使用 AEM 项目原型生成最新版本。

   • 对于 Java 和 WebDriver，请使用来自 AEM 测试示例存储库的示例代码。

   • 对于其他编程语言，请参阅本文档中的构建 UI 测试部分以设置测试项目。

2. 确保根据本文档的客户选择启用部分中的说明操作来激活 UI 测试。

3. 開發您的測試案例和 在本機執行測試.

4. 将代码提交到 Cloud Manager 存储库并执行 Cloud Manager 管道。

构建 UI 测试

Maven 项目生成 Docker 构建上下文。 此 Docker 构建上下文描述了如何创建包含 UI 测试的 Docker 映像，Cloud Manager 将使用它生成包含实际 UI 测试的 Docker 映像。

此部分介绍将 UI 测试项目添加到存储库所需的步骤。

生成 Docker 构建上下文

要生成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 分类器分配给它。 此外，它还列出了必须包含在档案中的文件，包括以下内容。

• 构建 Docker 映像时必须使用 Dockerfile
• wait-for-grid.sh 脚本，其用途如下所述
• 实际的 UI 测试，由 test-module 文件夹中的 Node.js 项目实现

Assembly 描述符还排除了在本地运行 UI 测试时可能生成的一些文件。 这保证了更小的档案和更快的构建。

Cloud Manager 会自动拾取包含 Docker 构建上下文的档案，它将在部署管道期间构建包含测试的 Docker 映像。最终，Cloud Manager 将运行 Docker 映像，对应用程序执行 UI 测试。

构建应该生成零或一个档案。 如果它生成零个档案，则默认通过测试步骤。 如果构建生成多个档案，那么选择哪个档案是不确定的。

客户选择启用

若要讓Cloud Manager建置和執行UI測試，您必須透過將檔案新增到存放庫來選擇使用此功能。

• 文件名称必须为 testing.properties。
• 文件内容必须为 ui-tests.version=1。
• 该文件必须在 UI 测试子模块的 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>
[...]

如果您使用的是 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 测试

本节描述包含 UI 测试的 Docker 映像必须遵循的惯例。 Docker 映像是根据上一节所述 Docker 构建上下文构建的。

环境变量

根据您的框架，以下环境变量将在运行时传递给 Docker 映像。

Adobe 测试示例提供了帮助程序函数来访问配置参数：

• Cypress：使用標準函式 Cypress.env('VARIABLE_NAME')
• JavaScript：请参阅 lib/config.js 模块
• Java：请参阅 Config 类

生成测试报告

Docker 映像必须以 JUnit XML 格式生成测试报告，并将其保存在环境变量 REPORTS_PATH 指定的路径中。JUnit XML格式是一種廣泛使用的報告測試結果的格式。 如果 Docker 映像使用 Java 和 Maven，则诸如 Maven Surefire 插件和 Maven Failsafe 插件等标准测试模块可以立即生成此类报告。

如果 Docker 映像是用其他编程语言或测试运行程序实现的，请查看文档，了解如何生成 JUnit XML 报告。

前提条件

• Cloud Manager 中的测试将使用具有技术管理员身份的用户执行。

• 用于功能测试的容器化基础架构受以下边界限制：

Selenium專屬詳細資訊

等待 Selenium 就绪

在测试开始之前，Docker 映像负责确保 Selenium 服务器启动并运行。 等待 Selenium 服务需要两个步骤。

1. 从 SELENIUM_BASE_URL 环境变量中读取 Selenium 服务的 URL。
2. 定期轮询 Selenium API 公开的状态端点。

一旦 Selenium 的状态端点得到肯定响应，测试就可以开始了。

Adobe UI 测试示例使用脚本 wait-for-grid.sh 执行此工作，该脚本在 Docker 启动时执行，并且仅在网格准备就绪后才开始实际测试执行。

捕获屏幕快照和视频

Docker映像可能會產生額外的測試輸出（例如，熒幕擷圖或影片），並將其儲存在環境變數指定的路徑中 REPORTS_PATH. 测试结果存档中包括任何可在 REPORTS_PATH 下找到的文件。

默认情况下，Adobe 提供的测试示例将为任何失败的测试创建屏幕快照。

您可以使用辅助程序函数通过测试创建屏幕快照。

• JavaScript：takeScreenshot 命令
• Java：命令

如果在执行 UI 测试期间创建了测试结果存档，则可使用​自定义 UI 测试​步骤下的 Download Details 按钮从 Cloud Manager 下载该存档。

上载文件

测试有时必须将文件上载到正在测试的应用程序。 為了使Selenium的部署相對於您的測試保持靈活，不能直接將資產直接上傳到Selenium。 相反，上载文件需要以下步骤。

1. 在 UPLOAD_URL 环境变量指定的 URL 处上载文件。
   • 上载必须在一个带有多部分表单的 POST 请求中执行。
   • 多部分表单必须有一个文件字段。
   • 这相当于 curl -X POST ${UPLOAD_URL} -F "data=@file.txt"。
   • 查阅 Docker 映像中使用的编程语言的文档和库，了解如何执行此类 HTTP 请求。
   • Adobe 测试示例提供了辅助程序函数来上传文件：
     • JavaScript：请参阅 getFileHandleForUpload 命令。
     • Java：请参阅 FileHandler 类。
2. 如果上载成功，请求将返回 200 OK 响应，响应类型为 text/plain。
   • 响应的内容是一个不透明的文件句柄。
   • 您可以使用此句柄代替 <input> 元素中的文件路径来测试应用程序中的文件上载。

本地运行 UI 测试

在 Cloud Manager 管道中激活 UI 测试之前，建议在本地对 AEM as a Cloud Service SDK 或实际的 AEM as a Cloud Service 实例中运行 UI 测试。

Cypress測試範例

1. 打开 shell 并导航到存储库中的 ui.tests/test-module 文件夹

2. 安裝Cypress和其他必要條件

   npm install
   

3. 設定測試執行所需的環境變數

   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/
   

4. 使用下列其中一個命令執行測試

   npm test              # Using default Cypress browser
   npm run test-chrome   # Using Google Chrome browser
   npm run test-firefox  # Using Firefox browser
   

JavaScript WebdriverIO測試範例

1. 打开 shell 并导航到存储库中的 ui.tests 文件夹

2. 执行以下命令以使用 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>
   

Java Selenium WebDriver測試範例

1. 打开 shell 并导航到存储库中的 ui.tests/test-module 文件夹

2. 執行以下命令以使用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
   

Business.Adobe.com 资源