在 Playwright HTML 報告中顯示元資料：完整指南

Playwright 是一個強大的測試框架，但它的 HTML 報告對於複雜的專案來說可能感覺很簡單。在報告標題中顯示提交訊息、作者詳細資訊或 CI 建立連結等元資料不是很好嗎？以下是實現這一目標的方法以及對 Playwright 功能的一些更深入的見解。

了解劇作家元數據

Playwright 文件提到了用於配置的元資料欄位：

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

將直接放入序列化為 JSON 的測試報告中的元資料

但有一個問題：新增此配置不會在報告中顯示任何元資料。如果您使用 TypeScript，您也會看到所提供範例的錯誤：

類型“字串”不可指派給類型“元資料”。

顯然，文件已經過時，但報告中的元資料確實是可能的。

真實的元資料配置

深入研究 Playwright 的原始程式碼後，我發現了 HTML 報告支援的實際欄位：

只能顯示這些欄位。讓我們在 playwright.config.ts 中設定它們：

執行測試後，HTML 報表標題會精美地顯示此元資料。

自動化元資料填充

手動填充元資料欄位並不實用，尤其是在 CI/CD 管道等動態環境中。自動化此流程可確保元資料準確且一致，無需手動操作。

第三方包

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

利用 Playwright 的隱藏式插件系統

Playwright 最有趣的發現之一是它的隱藏插件系統。雖然沒有正式記錄，但它提供了一種透過自訂外掛程式擴展 Playwright 功能的方法。

我在檢視劇作家本身的過程中得到了這個見解。 Playwright 支援隱藏配置欄位“@playwright/test”，您可以在其中定義外掛程式。

這是啟用 gitCommitInfo 外掛程式的範例：

gitCommitInfo 外掛程式有什麼作用？

此外掛程式提取 Git 提交詳細資訊並填充 HTML 報告中的元資料字段，包括：

• 提交雜湊
• 提交訊息
• 作者姓名與電子郵件
• 時間戳

此外，當在 CI/CD 環境中執行時，該外掛程式可以使用標準環境變數（如 GITHUB_SHA 或 CI_COMMIT_SHA）自動填入欄位。

啟用外掛程式並執行測試後，我得到了以下報告，其中自動填充了元資料：

其他插件

我很好奇，Playwright還有其他隱藏的插件嗎？
在plugins目錄中只有一個外掛程式－webServerPlugin。它允許在運行測試時啟動和停止內建 Web 伺服器。事實上，當你定義 config.webServer 選項時，這個外掛程式是在幕後使用的。因此，插件系統在 Playwright 內部使用，儘管沒有記錄供公共使用。

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

對元資料使用自訂函數

如果您希望在不依賴外掛程式的情況下自動填入元數據，則可以使用自訂函數來實現。我改編了 gitCommitInfo 插件中的 gitStatusFromCLI() 函數，使其可以獨立使用：

使用此函數填入 Playwright 配置中的元資料：

運行測試後，我得到了包含填充元資料的相同 HTML 報告：

這種方法可讓您完全控制元資料自動化，而無需依賴內部 Playwright 功能。

優化並行測試

一切看起來都不錯，但是上面的程式碼有效能問題。你能猜出問題是什麼嗎？

劇作家在工人之間進行測試。當每個worker啟動時，它會匯入Playwright配置。如果 Playwright 配置執行繁重的操作（例如取得 Git 資料），它會減慢工作人員的速度。此外，多次執行該命令是沒有意義的，因為它會傳回相同的結果。

您可以透過僅在主worker中執行元資料函數來最佳化它。主worker可以透過空的TEST_WORKER_INDEX環境變數來偵測：

這可確保有效填充元資料而不影響效能。

---

結論

將元資料新增至 Playwright HTML 報告是可能的，儘管沒有詳細記錄。您可以手動配置元資料、利用隱藏的插件系統或實施自訂解決方案。

關鍵要點：

• 元資料欄位僅限於特定鍵（revision.id、ci.link 等）。
• 使用 Playwright 的隱藏外掛程式或自訂腳本自動化元資料。
• 透過僅在主工作執行緒中執行元資料邏輯來最佳化並行測試。

根據本文的研究，我向 Playwright 儲存庫提出了拉取請求，提出元資料欄位的文件改進。

您是否嘗試過將元資料新增至劇作家報告？在評論中分享您的經驗或挑戰！

以上是在 Playwright HTML 報告中顯示元資料：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！