Automated Generation of Visual Regression Tests Through State Exploration

Sammanfattning

As web applications become increasingly central to digital experiences, ensuring visual consistency across user interfaces is crucial. Unintended visual changes, or visual regressions, can harm user experience and lead to significant issues for organisations. Visual Regression Testing (VRT) helps address this by detecting visual anomalies during the development process. This study explores how state exploration can enhance VRT suites for React component libraries using Storybook and Playwright. We present AutoVRT, a novel tool that automatically generates interaction-based VRT tests and evaluates them using first-order mutation analysis. Applied to five components from an industrial project: OSTTRA’s React library, AutoVRT produced 86 new interaction-based tests, improving the mutation score from 0.22 to 0.53, a 130% increase per component on average. Remaining limitations suggest a need for more well-defined component stories to support more effective test generation.