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

小贴士

Adobe建議使用Cypress進行UI測試,遵循 AEM測試範例存放庫.

Adobe也提供以JavaScript搭配WebdriverIO為基礎的UI測試模組範例(請參閱 AEM專案原型)和具有WebDriver的Java (請參閱 AEM測試範例存放庫)。

开始使用 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 测试项目添加到存储库所需的步骤。

小贴士

如果您对编程语言没有特殊要求,AEM 项目原型会为您生成符合以下说明的 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>
[...]
注意

如果您的项目不包括此行,则需要编辑该文件并选择进行 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 测试

本节描述包含 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:使用標準函式 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 报告。

注意

仅根据测试报告评估 UI 测试步骤的结果。请确保为您的测试执行生成相应报告。

使用断言而不是仅仅将错误记录到 STDERR 或返回非零退出代码,否则,您的部署管道可能会正常进行。

前提条件

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

要从本地计算机中运行功能测试,请创建一个具有类似管理员权限的用户来执行相同的行为。

  • 用于功能测试的容器化基础架构受以下边界限制:
类型 价值 描述
CPU 2.0 每次执行测试保留的 CPU 时间量
内存 1Gi 配置給測試的記憶體數量,以GB為單位的值
超时 30m 测试将终止的持续时间。
推荐持续时间 15m Adobe建議撰寫測試的時間不要超過這個時間。
注意

若您需要更多資源,請建立客戶服務案例並描述您的使用案例;Adobe將稽核您的請求並提供適當的協助。

Selenium專屬詳細資訊

注意

仅在 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 提供的测试示例将为任何失败的测试创建屏幕快照。

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

如果在执行 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 测试示例提供了辅助程序函数来上传文件:
  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
    
注意

日志文件将存储在存储库的 target/ 文件夹中。

如需詳細資訊,請參閱 AEM測試範例存放庫.

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>
    
注意
  • 這會啟動獨立的Selenium執行個體,並針對其執行測試。
  • 日志文件存储在存储库的 target/reports 文件夹中
  • 您必須確保電腦執行最新的Chrome版本,因為測試會自動下載最新版的ChromeDriver以進行測試。

如需詳細資訊,請參閱 AEM專案原型存放庫.

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
    
注意

日志文件将存储在存储库的 target/reports 文件夹中。

如需詳細資訊,請參閱 AEM測試範例存放庫.

在此页面上