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

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

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

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

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

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

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

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

真實的元資料配置

深入研究 Playwright 的原始程式碼後，我發(fā)現(xiàn)了 HTML 報告支援的實際欄位：

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

執(zhí)行測試後，HTML 報表標(biāo)題會精美地顯示此元資料。

自動化元資料填充

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

第三方包

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

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

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

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

這是啟用 gitCommitInfo 外掛程式的範(fàn)例：

gitCommitInfo 外掛程式有什麼作用？

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

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

此外，當(dāng)在 CI/CD 環(huán)境中執(zhí)行時，該外掛程式可以使用標(biāo)準(zhǔn)環(huán)境變數(shù)（如 GITHUB_SHA 或 CI_COMMIT_SHA）自動填入欄位。

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

其他插件

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

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

對元資料使用自訂函數(shù)

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

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

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

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

優(yōu)化並行測試

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

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

您可以透過僅在主worker中執(zhí)行元資料函數(shù)來最佳化它。主worker可以透過空的TEST_WORKER_INDEX環(huán)境變數(shù)來偵測：

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

---

結(jié)論

將元資料新增至 Playwright HTML 報告是可能的，儘管沒有詳細記錄。您可以手動配置元資料、利用隱藏的插件系統(tǒng)或?qū)嵤┳杂喗鉀Q方案。

關(guān)鍵要點：

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

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

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

以上是在 Playwright HTML 報告中顯示元資料：完整指南的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！