Company
Date Published
Author
Gleb Bahmutov
Word count
1810
Language
English
Hacker News points
None

Summary

In the Cypress RealWorld App, visual regression testing is employed to identify unintended style and layout changes using Percy.io, but the tests have been experiencing flakiness, with image differences reported despite no actual changes in the tests. The issue was traced to duplicate snapshot names and flaky DOM states, where the balance displayed in the snapshots could change unexpectedly due to race conditions. To resolve these issues, the practice of using unique and descriptive snapshot names was implemented, along with ensuring DOM stability before taking snapshots, by confirming that the balance has been updated before capturing images. Additionally, a utility function was introduced to determine mobile resolutions, allowing tests to adjust their assertions based on whether the balance is visible. These adjustments led to more reliable test results, and similar principles were applied to stabilize another test involving user list searches through functional assertions before capturing visual snapshots.