視覺測試

視覺測試會捕捉 UI 外觀的錯誤。其運作方式是擷取每個 Story 的螢幕截圖，並將其與先前的版本進行比較，以識別視覺上的變化。這非常適合驗證版面配置、顏色、大小、對比度以及 UI 的任何其他視覺方面。

Storybook 原生支援使用 Chromatic 進行跨瀏覽器視覺測試，Chromatic 是 Storybook 團隊建立的雲端服務。啟用視覺測試後，每個 Story 都會自動轉換為測試。這讓您可以直接在 Storybook 中獲得關於 UI 錯誤的即時回饋。

安裝擴充功能

透過安裝 @chromatic-com/storybook (Storybook 維護人員的官方擴充功能) 將視覺測試新增至您的專案

npx storybook@latest add @chromatic-com/storybook

需要 Storybook 7.6 或更高版本。請閱讀遷移指南以升級您的專案。

啟用視覺測試

當您啟動 Storybook 時，您會看到一個新的視覺測試擴充功能面板，您可以在其中執行測試並檢視結果。

Visual Tests addon enabled

若要啟用視覺測試，請註冊 Chromatic 並建立專案。這將讓您存取一系列雲端瀏覽器。

Visual Tests addon project selection

從您的專案清單中選取專案以完成設定。如果您是第一次設定擴充功能，則會自動為您新增設定檔和必要的專案識別碼。

設定

預設情況下，此擴充功能包含涵蓋大多數使用案例的組態選項。您也可以透過 ./chromatic.config.json 檔案微調擴充功能組態，使其符合您專案的需求。以下是可用的選項以及如何使用它們的範例。

選項	說明
`projectId`	自動設定。設定專案識別碼的值 `"projectId": "Project:64cbcde96f99841e8b007d75"`
`buildScriptName`	選用。定義自訂 Storybook 建置指令碼 `"buildScriptName": "deploy-storybook"`
`debug`	選用。將詳細的偵錯資訊輸出到主控台。 `"debug": true`
`zip`	選用。建議用於大型專案。將擴充功能設定為以 zip 檔案的形式將您的 Storybook 部署到 Chromatic。 `"zip": true`

// ./chromatic.config.json
{
  "buildScriptName": "deploy-storybook",
  "debug": true,
  "projectId": "Project:64cbcde96f99841e8b007d75",
  "zip": true
}