UI 測試 ui-testing

自訂 UI 測試是一項選擇性功能，可讓您為應用程式建立和自動執行 UI 測試。

概觀 custom-ui-testing

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 測試 get-started-ui-tests

本節旨在說明設定 UI 測試以便在 Cloud Manager 中執行所需的步驟。

構建 UI 測試 building-ui-tests

一個 Maven 項目會產生一個 Docker 建置內容。此 Docker 建置內容旨在說明如何建立包含 UI 測試的 Docker 映像，Cloud Manager 會用來透過該影像產生包含實際 UI 測試的 Docker 映像。

本節介紹將 UI 測試項目新增到存放庫所需的步驟。

產生 Docker 建置內容 generate-docker-build-context

若要產生 Docker 建置環境，您需要一個 Maven 模組：

最簡單的方法是配置 Maven 組裝插件建立 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 程序集插件，類似於以下內容。

<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-ui-test-docker-context.xml，稱為​ 程序集描述符 ​在插件的行話中。程序集描述符列出了必須是歸檔一部分的所有文件。

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

程序集描述符指示插件建立類型的封存.tar.gz並指派ui-test-docker-context分類器。此外，它列出了必須包含在封存中的檔案，包括以下內容：

程序集描述符還排除了在本機執行 UI 測試時可能產生的一些文件。這保證了更小的封存和更快的建構。

包含 Docker 建置內容的封存由 Cloud Manager 自動獲取，它將在其部署管道期間構建包含您的測試的 Docker 映像。最終，Cloud Manager 將執行 Docker 映像以針對您的應用程序執行 UI 測試。

建構應產生零個或一個封存。如果產生零個封存，則測試步驟預設透過。如果建置產生多個封存，則無法確定要選擇哪個封存。

客戶選擇加入 customer-opt-in

為了讓 Cloud Manager 建置和執行您的 UI 測試，您必須在存放庫新增一個檔案來選擇加入此功能。

如果此檔案不存在，將跳過 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 提供的範例：

編寫 UI 測試 writing-ui-tests

本節介紹包含 UI 測試的 Docker 映像必須遵循的約定。Docker 映像是根據上一節中描述的 Docker 建置內容建構的。

環境變數 environment-variables

以下環境變數會在執行階段傳遞給您的 Docker 映像，視您的架構而定。

* these values will be empty if there is no publish instance

Adobe 測試範例提供輔助函數以存取設定參數：

產生測試報告 generate-test-reports

Docker 鏡像必須產生 JUnit XML 格式的測試報告，並保存在環境變數 REPORTS_PATH 指定的路徑中。JUnit XML 格式是廣泛使用的測試結果報告格式。如果 Docker 鏡像使用 Java 和 Maven，標準測試模組如 Maven Surefire 插件和 Maven 故障安全插件可以開箱即用地產生此類報告。

如果 Docker 映像是使用其他編程語言或測試執行計畫實現的，請查看所選工具的文件以了解如何產生 JUnit XML 報告。

必備條件 prerequisites

Selenium 特定的詳細資訊

等待 Selenium 準備就緒 waiting-for-selenium

在測試開始之前，Docker 影像負責確保 Selenium 伺服器啟動並執行。等待 Selenium 服務有兩個步驟。

一旦 Selenium 的狀態端點得到肯定的響應，測試就可以開始了。

Adobe UI 測試範例使用指令碼 wait-for-grid.sh 處理此問題，該指令碼在 Docker 啟動時執行，並且僅在網格準備就緒後才開始實際測試執行。

擷取螢幕擷圖和影片 capture-screenshots

Docker 映像檔可能會產生額外的測試輸出 (例如螢幕擷圖或影片)，並保存在環境變數 REPORTS_PATH 指定的路徑中。在 REPORTS_PATH 下找到的任何檔案都包含在測試結果封存檔中。

Adobe 提供的測試範例依預設為任何失敗的測試建立螢幕擷圖。

您可以使用輔助函數通過測試建立螢幕擷圖。

如果在 UI 測試執行期間建立測試結果存檔，您可以使用​自訂 UI 測試 ​步驟下的 Download Details 按鈕從 Cloud Manager 下載。

上傳檔案 upload-files

測試有時必須將文件上傳到被測試的應用程式。為了使 Selenium 的部署對您的測試保持相對的靈活性，無法直接把資產上傳到 Selenium。相反，上傳文件需要以下步驟。

Cypress專屬詳細資料

設定HTTP Proxy

Docker容器的入口點需要檢查PROXY_HOST環境變數的值。

如果此值為空，則不需要其他步驟，且測試應在不使用HTTP Proxy的情況下執行。

如果不是空白，entrypoint指令碼需要：

您可以在GitHub上的Cypress範例測試模組的Entrypoint中找到實作範例。

播放權特定的詳細資料

設定HTTP Proxy

與Cypress類似，如果提供了非空白的PROXY_HOST環境變數，則測試需要使用HTTP Proxy。

若要這麼做，必須進行下列修改。

Dockerfile

安裝cURL和libnss3-tools，提供certutil.

RUN apt -y update \
    && apt -y --no-install-recommends install curl libnss3-tools \
    && rm -rf /var/lib/apt/lists/*

Entrypoint指令碼

納入bash指令碼，在已提供PROXY_HOST環境變數的情況下，其會執行下列動作：

實作範例：

# setup proxy environment variables and CA certificate
if [ -n "${PROXY_HOST:-}" ]; then
  if [ -n "${PROXY_HTTPS_PORT:-}" ]; then
    export HTTP_PROXY="https://${PROXY_HOST}:${PROXY_HTTPS_PORT}"
  elif [ -n "${PROXY_HTTP_PORT:-}" ]; then
    export HTTP_PROXY="http://${PROXY_HOST}:${PROXY_HTTP_PORT}"
  fi
  if [ -n "${PROXY_CA_PATH:-}" ]; then
    echo "installing certificate"
    mkdir -p $HOME/.pki/nssdb
    certutil -d sql:$HOME/.pki/nssdb -A -t "CT,c,c" -n "EaaS Client Proxy Root" -i $PROXY_CA_PATH
    export NODE_EXTRA_CA_CERTS=${PROXY_CA_PATH}
  fi
  if [ -n "${PROXY_OBSERVABILITY_PORT:-}" ] && [ -n "${HTTP_PROXY:-}" ]; then
    echo "waiting for proxy"
    curl --silent  --retry ${PROXY_RETRY_ATTEMPTS:-3} --retry-connrefused --retry-delay ${PROXY_RETRY_DELAY:-10} \
      --proxy ${HTTP_PROXY} --proxy-cacert ${PROXY_CA_PATH:-""} \
      ${PROXY_HOST}:${PROXY_OBSERVABILITY_PORT}
    if [ $? -ne 0 ]; then
      echo "proxy is not ready"
      exit 1
    fi
  fi
fi

播放器設定

修改播放權設定（例如playwright.config.js中的）以使用Proxy，以防已設定HTTP_PROXY環境變數。

實作範例：

const proxyServer = process.env.HTTP_PROXY || ''

// enable proxy if set
if (proxyServer !== '') {
 cfg.use.proxy = {
  server: proxyServer,
 }
}

在本機執行 UI 測試 run-ui-tests-locally

在 Cloud Manager 管道啟用 UI 測試之前，建議在本機針對 AEM as a Cloud Service SDK 或實際的 AEM as a Cloud Service 執行個體執行 UI 測試。

Cypress 測試範例 cypress-sample

JavaScript WebdriverIO 測試範例 javascript-sample

Playwright測試範例 playwright-sample

Java Selenium WebDriver 測試範例 java-sample