跳至主要內容

Allure 報表器

一個 WebdriverIO 報表器外掛程式，用於建立 Allure 測試報告。

Allure Reporter Example

安裝​

最簡單的方式是在您的 package.json 中包含 @wdio/allure-reporter 作為 devDependency。

{
  "devDependencies": {
    "@wdio/allure-reporter": "^7.0.0"
  }
}

您只需透過以下方式即可完成：

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

設定​

在您的 wdio.conf.js 檔案中設定輸出目錄

export const config = {
    // ...
    reporters: [['allure', {
        outputDir: 'allure-results',
        disableWebdriverStepsReporting: true,
        disableWebdriverScreenshotsReporting: true,
    }]],
    // ...
}
  • outputDir 預設為 ./allure-results。測試執行完成後，您會發現此目錄已填入每個規格的 .xml 檔案，以及一些 .txt 和 .png 檔案和其他附件。
  • disableWebdriverStepsReporting - 可選參數（預設為 false），以便僅將自訂步驟記錄到報表器。
  • issueLinkTemplate - 可選參數，用於指定問題連結模式。報表器將使用 addIssue(value) 呼叫參數中指定的值取代 {} 預留位置。如果使用 Cucumber 並且在任何層級設定標籤 issue，也會應用相同的邏輯，它將轉換為報告中的連結。參數值範例 
    https://example.org/issue/{}
  • tmsLinkTemplate - 可選參數，用於指定 TMS（測試管理系統）連結模式。報表器將使用 addTestId(value) 呼叫參數中指定的值取代 {} 預留位置。如果使用 Cucumber 並且在任何層級設定標籤 testId，也會應用相同的邏輯，它將轉換為報告中的連結。參數值範例 
    https://example.org/tms/{}
  • disableWebdriverScreenshotsReporting - 可選參數（預設為 false），以便不將螢幕截圖附加到報表器。
  • useCucumberStepReporter - 可選參數（預設為 false），在使用 cucumber 時，將其設定為 true 以變更報告階層。親自試試看，看看效果如何。
  • disableMochaHooks - 可選參數（預設為 false），將其設定為 true 以便不擷取 before/after 堆疊追蹤/螢幕截圖/結果掛鉤到 Allure 報表器中。
  • addConsoleLogs - 可選參數（預設為 false），設定為 true 以便將步驟中的主控台記錄附加到報表器。
  • reportedEnvironmentVars (type: Record<string, string>) - 設定此選項以在報告中顯示環境變數。請注意，設定此項並不會修改實際的環境變數。

支援的 Allure API​

  • addLabel(name, value) - 將自訂標籤指派給測試
  • addFeature(featureName) – 將功能指派給測試
  • addStory(storyName) – 將使用者故事指派給測試
  • addSeverity(value) – 將嚴重性指派給測試，接受以下其中一個值：blocker、critical、normal、minor、trivial
  • addTag(value) – 將標籤標籤指派給測試
  • addEpic(value) – 將史詩標籤指派給測試
  • addOwner(value) – 將擁有者標籤指派給測試
  • addSuite(value) – 將套件標籤指派給測試
  • addSubSuite(value) – 將子套件標籤指派給測試
  • addParentSuite(value) – 將父套件標籤指派給測試
  • addIssue(value) – 將問題 ID 指派給測試
  • addAllureId(value) – 將 allure 測試作業 ID 標籤指派給測試
  • addTestId(value) – 將 TMS 測試 ID 指派給測試
  • ~~addEnvironment(name, value) ~~ – 已淘汰且不再運作的函式。請改用 reportedEnvironmentVars
  • addAttachment(name, content, [type]) – 將附件儲存至測試。
    • name (String) - 附件名稱。
    • content – 附件內容。
    • type (String, 可選) – 附件 MIME 類型，預設為 text/plain
  • addArgument(name, value) - 將其他引數新增至測試
  • addDescription(description, [type]) – 將描述新增至測試。
    • description (String) - 測試的描述。
    • type (String, 可選) – 描述類型，預設為 text。值 ['text', 'html','markdown']
  • addStep(title, [{content, name = 'attachment'}], [status]) - 將步驟新增至測試。
    • title (String) - 步驟名稱。
    • content (String, 可選) - 步驟附件
    • name (String, 可選) - 步驟附件名稱，預設為 attachment。
    • status (String, 可選) - 步驟狀態，預設為 passed。必須為 "failed"、"passed" 或 "broken"
  • startStep(title) - 從步驟開始
    • title (String) - 步驟名稱。
  • endStep(status) - 從步驟結束
    • status (String, 可選) - 步驟狀態，預設為 passed。必須為 "failed"、"passed" 或 "broken"
  • step(name, body) - 從內部內容函式開始步驟。允許建立具有無限階層的步驟
    • body (Function) - 步驟主體非同步函式

用法​

可以使用以下方式存取 Allure API

CJS

const allureReporter = require('@wdio/allure-reporter').default

ESM

import allureReporter from '@wdio/allure-reporter'

Mocha 範例

describe('Suite', () => {
    it('Case', () => {
        allureReporter.addFeature('Feature')
    })
})

Cucumber​

基本 Cucumber 範例

Given('I include feature and story name', () => {
    allureReporter.addFeature('Feature_name');
    allureReporter.addStory('Story_name');
})

自訂步驟​

step 方法簡化了步驟的處理，因為每個步驟都呈現為內部具有任何內容的非同步函式。函式的第一個引數是目前的步驟，其中具有大部分的 allure API 方法（例如 label、epic、attach 等）

allureReporter.step('my step name', async (s1) => {
    s1.label('foo', 'bar')
    await s1.step('my child step name', async (s2) => {
        // you can add any combination of steps in the body function
    })
})
Cucumber 標籤​

具有特殊名稱（issue 和 testId）的 Cucumber 標籤會轉換為連結（必須先設定對應的連結範本）

@issue=BUG-1
@testId=TST-2
Feature: This is a feature with global tags that will be converted to Allure links

  @issue=BUG-3
  @testId=TST-4
  Scenario: This is a scenario with tags that will be converted to Allure links
    Given I do something

具有特殊名稱（feature）的 Cucumber 標籤會對應至 Allure 標籤

Feature: Test user role

  @feature=login
  Scenario: Login
    Given I test login

顯示報告​

結果可由 Allure 提供的任何報表工具取用。例如

命令列​

安裝 Allure 命令列工具，並處理結果目錄

allure generate [allure_output_dir] && allure open

這會產生報告（預設在 ./allure-report 中），並在您的瀏覽器中開啟。

自動產生報告​

您也可以透過程式設計方式使用 Allure 命令列工具自動產生報告。若要執行此操作，請透過以下方式將套件安裝到您的專案中

npm i allure-commandline

然後新增或擴充您的 onComplete 掛鉤，或為此建立自訂服務

// wdio.conf.js
const allure = require('allure-commandline')

export const config = {
    // ...
    onComplete: function() {
        const reportError = new Error('Could not generate Allure report')
        const generation = allure(['generate', 'allure-results', '--clean'])
        return new Promise((resolve, reject) => {
            const generationTimeout = setTimeout(
                () => reject(reportError),
                5000)

            generation.on('exit', function(exitCode) {
                clearTimeout(generationTimeout)

                if (exitCode !== 0) {
                    return reject(reportError)
                }

                console.log('Allure report successfully generated')
                resolve()
            })
        })
    }
    // ...
}

Jenkins​

安裝並設定 Allure Jenkins 外掛程式

新增螢幕截圖​

可以使用 WebDriverIO 的 takeScreenshot 函式，在 Mocha 和 Jasmine 的 afterTest hook 或 Cucumber 的 afterStep hook 中將螢幕截圖附加到報告中。首先，在報表選項中設定 disableWebdriverScreenshotsReporting: false，然後加入 afterStep hook。

Mocha / Jasmine​

wdio.conf.js
afterTest: async function(test, context, { error, result, duration, passed, retries }) {
    if (error) {
        await browser.takeScreenshot();
    }
}

Cucumber​

wdio.conf.js
afterStep: async function (step, scenario, { error, duration, passed }, context) {
  if (error) {
    await browser.takeScreenshot();
  }
}

如以上範例所示，當呼叫此函式時，螢幕截圖影像將會附加到 Allure 報告中。

歡迎！我可以幫你什麼忙？

WebdriverIO AI Copilot