Playwright 是一個強(qiáng)大的測試框架，但它的 HTML 報告對于復(fù)雜的項(xiàng)目來說可能感覺很簡單。在報告標(biāo)題中顯示提交消息、作者詳細(xì)信息或 CI 構(gòu)建鏈接等元數(shù)據(jù)不是很好嗎？以下是實(shí)現(xiàn)這一目標(biāo)的方法以及對 Playwright 功能的一些更深入的見解。

了解劇作家元數(shù)據(jù)

Playwright 文檔提到了用于配置的元數(shù)據(jù)字段：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

在撰寫本文時（Playwright v1.49），它指出：

將直接放入序列化為 JSON 的測試報告中的元數(shù)據(jù)

但有一個問題：添加此配置不會在報告中顯示任何元數(shù)據(jù)。如果您使用 TypeScript，您還會看到所提供示例的錯誤：

類型“字符串”不可分配給類型“元數(shù)據(jù)”。

顯然，文檔已經(jīng)過時，但報告中的元數(shù)據(jù)確實(shí)是可能的。

真實(shí)的元數(shù)據(jù)配置

深入研究 Playwright 的源代碼后，我發(fā)現(xiàn)了 HTML 報告支持的實(shí)際字段：

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

只能顯示這些字段。讓我們在 playwright.config.ts 中配置它們：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

運(yùn)行測試后，HTML 報告標(biāo)題會精美地顯示此元數(shù)據(jù)。

自動化元數(shù)據(jù)填充

手動填充元數(shù)據(jù)字段并不實(shí)用，尤其是在 CI/CD 管道等動態(tài)環(huán)境中。自動化此過程可確保元數(shù)據(jù)準(zhǔn)確且一致，無需手動操作。

第三方包

要自動化該過程，您可以利用任何提取 Git 提交信息的第三方包。這是一個簡單的方法，讓我們繼續(xù)討論更有趣的第二個選項(xiàng)。

利用 Playwright 的隱藏插件系統(tǒng)

Playwright 最有趣的發(fā)現(xiàn)之一是它的隱藏插件系統(tǒng)。雖然沒有正式記錄，但它提供了一種通過自定義插件擴(kuò)展 Playwright 功能的方法。

我在審視劇作家本身的過程中得到了這個見解。 Playwright 支持隱藏配置字段“@playwright/test”，您可以在其中定義插件。

這是啟用 gitCommitInfo 插件的示例：

import { defineConfig } from '@playwright/test';
import { gitCommitInfo } from 'playwright/lib/plugins';

export default defineConfig({
  reporter: 'html',
  // @ts-expect-error
  '@playwright/test': { 
    plugins: [gitCommitInfo()] 
  },
});

gitCommitInfo 插件有什么作用？

此插件提取 Git 提交詳細(xì)信息并填充 HTML 報告中的元數(shù)據(jù)字段，包括：

• 提交哈希
• 提交消息
• 作者姓名和電子郵件
• 時間戳

此外，當(dāng)在 CI/CD 環(huán)境中運(yùn)行時，該插件可以使用標(biāo)準(zhǔn)環(huán)境變量（如 GITHUB_SHA 或 CI_COMMIT_SHA）自動填充字段。

啟用插件并運(yùn)行測試后，我得到了以下報告，其中自動填充了元數(shù)據(jù)：

其他插件

我很好奇，Playwright還有其他隱藏的插件嗎？
在plugins目錄中只有一個插件——webServerPlugin。它允許在運(yùn)行測試時啟動和停止內(nèi)置 Web 服務(wù)器。事實(shí)上，當(dāng)你定義 config.webServer 選項(xiàng)時，這個插件是在幕后使用的。因此，插件系統(tǒng)在 Playwright 內(nèi)部使用，盡管沒有記錄供公共使用。

插件系統(tǒng)是在早期版本的 Playwright 中引入的，但在某些時候被隱藏了。不幸的是，目前還沒有計(jì)劃公開它。

對元數(shù)據(jù)使用自定義函數(shù)

如果您希望在不依賴插件的情況下自動填充元數(shù)據(jù)，則可以使用自定義函數(shù)來實(shí)現(xiàn)。我改編了 gitCommitInfo 插件中的 gitStatusFromCLI() 函數(shù)，使其可以獨(dú)立使用：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

使用該函數(shù)填充 Playwright 配置中的元數(shù)據(jù)：

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

運(yùn)行測試后，我得到了包含填充元數(shù)據(jù)的相同 HTML 報告：

這種方法使您可以完全控制元數(shù)據(jù)自動化，而無需依賴內(nèi)部 Playwright 功能。

優(yōu)化并行測試

一切看起來都不錯，但是上面的代碼存在性能問題。你能猜出問題是什么嗎？

劇作家在工人中進(jìn)行測試。當(dāng)每個worker啟動時，它會導(dǎo)入Playwright配置。如果 Playwright 配置執(zhí)行繁重的操作（例如獲取 Git 數(shù)據(jù)），它會減慢工作人員的速度。此外，多次執(zhí)行該命令是沒有意義的，因?yàn)樗鼤祷叵嗤慕Y(jié)果。

您可以通過僅在主worker中執(zhí)行元數(shù)據(jù)函數(shù)來優(yōu)化它。主worker可以通過空的TEST_WORKER_INDEX環(huán)境變量來檢測：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

這可確保有效填充元數(shù)據(jù)而不影響性能。

---

結(jié)論

將元數(shù)據(jù)添加到 Playwright HTML 報告中是可能的，盡管沒有詳細(xì)記錄。您可以手動配置元數(shù)據(jù)、利用隱藏的插件系統(tǒng)或?qū)嵤┳远x解決方案。

關(guān)鍵要點(diǎn)：

• 元數(shù)據(jù)字段僅限于特定鍵（revision.id、ci.link 等）。
• 使用 Playwright 的隱藏插件或自定義腳本自動化元數(shù)據(jù)。
• 通過僅在主工作線程中執(zhí)行元數(shù)據(jù)邏輯來優(yōu)化并行測試。

根據(jù)本文的研究，我向 Playwright 存儲庫提出了拉取請求，提出元數(shù)據(jù)字段的文檔改進(jìn)。

您是否嘗試過將元數(shù)據(jù)添加到劇作家報告中？在評論中分享您的經(jīng)驗(yàn)或挑戰(zhàn)！

以上是在 Playwright HTML 報告中顯示元數(shù)據(jù)：完整指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！