#storybook

The Talk discusses the evolution of test automation from the original test automation pyramid to the testing pyramid. It explores modern approaches to UI component testing, including isolations and testing with a fake DOM. The importance of testing in a real browser and the emergence of tools like Selenium, WebDriver.io, Puppeteer, Cypress, and PlayWrite for browser automation are highlighted. The advantages of out-of-process browser automation are explained, along with the use of Storybook and Playwright for testing components. The distinction between end-to-end testing and component testing is also mentioned.

UI testing is hard, but Storybook and Chromatic simplify the process by allowing you to build and test your UI in isolation. Chromatic compares UI changes, detects even minor visual differences, and eliminates the need for manual testing. Loading images and simulating user workflows in Storybook ensure consistent testing. Interaction tests cover user workflows and can be used for complex components, resolving issues and creating test cases.

Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.

This Talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the complexities of the UI multiverse and the challenges in managing UI states. The suitability of different testing strategies across the testing continuum is examined, along with the importance of addressing the weight of UI testing challenges. The role of tools like Storybook and Chromatic in automated testing and collaboration is emphasized. Ultimately, the Talk emphasizes the love for the web and the need for strategies to manage the UI multiverse.