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 资源