Reuben Ellis
My name is Reuben Ellis, and I'm the lead solutions engineer at Chromatic. I've been using Storybook and various visual regression test tools for years. My primary passion and focus have always been on automation testing and integrations! Ultimately, my goal is to make the day-to-day better for other engineers.
Visual Testing: Optimize Storybook and Win
TestJS Summit 2023
9 min
Visual Testing: Optimize Storybook and Win
One thing most people agree on is that UI's have multiple dimensions of complexity.Imagine you are at lunch with some of your team or family, and you get a Slack message that a portion of the site isn’t working.The Ad placement no longer loads on your money-generating news site that sees millions of monthly users.Or your login form loads infinitely after a user attempts to log in, and no one can access the application.The backend logic works and all API requests return 200 responses.It turns out we missed a loading state handler for the component, and the UI does not render correctly.How do we manage all of that?The conventional approach is to build the component on the application page where it is first used and manually test or use integration tests to verify UI.This approach makes it difficult to verify all the component states.Instead of all this overwhelm, you want a simple comparison of your UI and how it looks now after making changes.This is where Storybook + a visual regression testing tool come in!