從 Allure 生成 HTML 報告

---

---

在 WebdriverIO 中，我們有一個報告程式外掛來生成 Allure 測試報告。Allure 是一款輕量級的測試報告工具，它根據自動化執行的測試結果建立簡明且記錄良好的報告。

要安裝 Allure 並將其條目建立到 package.json 檔案中，我們需要執行以下命令：

npm install @wdio/allure-reporter --save-dev

有關 package.json 的詳細資訊在標題為“package.json 檔案”的章節中進行了討論。

您的計算機上將顯示以下螢幕：

安裝 Allure 後，我們需要在配置檔案 wdio.conf.js 中的 reporter 選項中配置輸出目錄，方法是新增以下程式碼。

有關如何建立配置檔案的詳細資訊在標題為“wdio.conf.js 檔案”和“配置檔案生成”的章節中進行了詳細討論。

reporters: [['allure', {
   outputDir: 'allure-results',
   disableWebdriverScreenshotsReporting: false,
}]],

您的計算機上將顯示以下螢幕：

這裡，outputDir 具有預設目錄 /allure-results。自動化完成後，我們將發現此目錄已生成。它將包含 specs 資料夾中每個測試檔案（包含在執行中）的 .xml 檔案以及 .txt、.png 和其他檔案。

此外，為了附加失敗測試的螢幕截圖，我們已將引數 disableWebdriverScreenshotsReporting 設定為 false。

但是，我們還需要在 wdio.conf.js 檔案中新增一個 afterStep 鉤子，程式碼如下所示：

afterStep: function (test, scenario, { error, duration, passed }) {
   if (error) {
      browser.takeScreenshot();
   }
}

您的計算機上將顯示以下螢幕：

使用以下命令執行配置檔案 - wdio.conf.js 檔案：

npx wdio run wdio.conf.js

有關如何建立配置檔案的詳細資訊在標題為“wdio.conf.js 檔案”和“配置檔案生成”的章節中進行了詳細討論。

您的計算機上將顯示以下螢幕：

成功執行命令後，將在 WebdriverIO 專案中生成一個名為 allure-results（如 wdio.conf.js 中指定）的資料夾。它包含 xml 格式的報告。

接下來，我們需要將這些報告轉換為 HTML 格式。為此，我們將首先安裝 Allure 命令列工具，用於從測試結果生成 Allure 報告。

這是透過執行以下命令完成的：

npm install -g allure-commandline --save-dev

安裝完成後，我們可以使用以下命令以 HTML 格式生成結果：

allure generate [allure_output_dir] && allure open

要覆蓋現有結果，我們需要執行以下命令：

allure generate [allure_output_dir] --clean && allure open

您的計算機上將顯示以下螢幕：

成功執行命令後，將開啟一個包含測試結果的瀏覽器。您的計算機上將顯示以下螢幕：

單擊失敗的測試（用紅色標記），我們將獲得測試的詳細資訊，包括預期輸出、實際輸出和失敗的螢幕截圖（在展開“響應”後獲得）。

您的計算機上將顯示以下螢幕：