Auroratide

Coding + Storytelling

Storyshots

Tool

  • A list of visual regression tests that have just run.
    Storyshots takes a picture of every single component in your codebase.
  • Side-by-side comparison of two screenshots of a button, before and after being edited.
    If something does not match, you can preview the difference and troubleshoot.

Storyshots is an open-source developer tool for automatic visual regression testing on any project that uses Storybook and Playwright.

Basically, this tool takes pictures of all the different parts of a website. When you make a change to the website, it retakes all those pictures and compares them, giving you a chance to review and ensure everything that changed was intended. This avoids that awkward scenario where you change one thing and it completely breaks the layout of a totally different page! This process is called visual regression testing.

I have contributed to this project created by Compoze Labs. It uses:

  • Docker for creating an environment within which screenshots can be guaranteed to be the same across different computers
  • Storybook for visualizing all the different components of a website
  • Playwright for taking a screenshot of each individual component and comparing them to previous versions