Covered a new reusable library of interactive UI elements with 900+ visual tests and functional UI tests
- 900+visual tests for a UI element library
- 2test layers: functional and visual
- Every changechecked in CI
Challenge
A new reusable library of visual, interactive elements was being built to serve as a shared UI foundation. A defect in one shared element would appear in every product that used it, and it could be either a broken interaction or a visual change that no functional check would notice. The library changed continuously while it was being built, so manual checking of how every element looked and behaved could not keep up.
My Solution
- Split the testing into two complementary layers and defined what each one had to prove: functional UI tests for how elements behave, and visual testing for how they look.
- Automated functional UI tests with Playwright to check element behavior and interaction, so a change to one element did not silently break how it worked.
- Added visual testing, also with Playwright, based on a snapshot approach: each element's rendering is compared against an approved snapshot to catch unintended changes in how elements render, which functional assertions do not detect. The trade-off is that every intended design change also fails the comparison, so its snapshots must be reviewed and updated.
- Integrated both suites into CI so every change to the library was checked automatically, with test reporting.
Result
created more than 900 visual tests, run in CI alongside the functional tests, so unintended behavior and appearance changes were caught before products consumed the library.