視覺化測試手冊

視覺化測試是一種實用且精確的方式來驗證 UI 元件的外觀。Slack、Lonely Planet 和 Walmart 等公司都在實踐這種方法。本手冊概述了 Storybook 中的視覺化測試。

33+

貢獻者

章節

概觀

什麼是視覺化測試？視覺化測試透過在一致的瀏覽器環境中擷取 UI 的影像來驗證呈現的 UI 外觀。該影像會與先前的影像（基準）進行比較，以偵測視覺變化。UI 比以往任何時候都更加複雜、多狀態且個人化。視覺化測試可協助您確保您的應用程式在每次發布時看起來都正確。

React

CommentList

CommentList 是一個列表元件，您可能會在任何聊天工具中找到它。請跟隨我們示範如何使用 Storybook 建構離散的 UI 變體。然後，我們將逐步介紹手動和自動進行視覺化測試的流程。

作者

Dominic Nguyen

Storybook 設計

Tom Coleman

Storybook 核心