Kakao Entertainment Shares Case Study on Automating Storybook-Based Visual Regression Tests with BackstopJS

The FE team at Kakao Entertainment shared their six-month experience in building and automating Storybook-based visual regression tests (VRT) using BackstopJS. By using Storybook build outputs as test targets instead of actual service pages, they reduced risks associated with design changes and structured test scenarios at the Organism level of the Atomic Design System.

Test Scope and Side Effect Prevention

They selected Organism units, which involve complex UIs and design intents, as test targets rather than small unit components. BackstopJS enabled the early detection of unintended component breakages caused by common logic modifications, such as date format changes, effectively preventing side effects during refactoring.

Storybook 7 Migration Issues

Updating Storybook from version 6 to 7 caused all existing tests to fail due to the discontinuation of filesystem (file://) support, as the change in ESM loading methods was incompatible with CORS settings. They resolved this by launching an HTTP server directly inside a Docker container and modifying the test URL structure to access http://127.0.0.1:8080.

CI/CD Pipeline Automation

They automated the process of reviewing test results and updating reference images. When a PR is created, Jenkins and a bot post comments with the number of successful/failed tests and reports. After the PR is merged, if a push occurs to the develop branch, the Jenkins pipeline automatically executes the backstop approve command to update reference images and commit them to Git. This reduced the maintenance burden of documentation and ensured the stability of Storybook.