![]() We turned to Cypress’s API to generate the images. Also, such comparisons could be more prone to human error, such as missing that a footer had changed.Ī third option would have been to go through every single test case to decide what to capture, but that would have taken a lot more time, so sticking to all elements used on the pages seemed like a practical compromise. As mentioned, we had a good amount of UI tests covering the majority of the Talent Portal, so in an effort to collect as many critical components as possible, we decided to take screenshots of individual elements after each interaction.Īn alternative approach would have been to take screenshots of the entire page at key moments during the test, but we decided those images would be too difficult to compare. With a clear goal in mind, it was time to look at how Cypress could help us get the screenshots we needed. Similarly, a deviation as small as a few pixels could mean a component is not currently fit for production. ![]() Even if a given component happened to be 100% different, it might still be correct in the context of the new version. In this release, though, we knew we were going to have several small changes to most of our UI components, so setting a threshold was not applicable. If the pixel difference is greater than a set tolerance threshold, the page or component is flagged to be examined manually. Most visual regression tools help identify unwanted changes by comparing snapshots and detecting pixel differences between a known, accepted baseline and the modified version of a page or a component. It only took a few minutes to set up, and once we did, we quickly realized we were not in pursuit of a traditional visual regression output. From Cypress to ScreenshotsĪfter going through the available documentation, we decided to give cypress-snapshot-plugin a try. Even though that’s not what the tool is mostly used for, Cypress has one page in its documentation dedicated to visual testing and another that lists all the available plug-ins to help configure Cypress for visual testing. While we did not have visual regression tests in the project, we did have good coverage of UI integration tests using Cypress. Visual Regression Testing Through UI Testing We already had a date set for a code freeze to start the migration, and with only a few days remaining until the deadline, we had no choice but to be creative. We ultimately decided the setup process would be too time-consuming and could derail our schedule. ![]() ![]() Tools like Percy, Happo, and Chromatic can be used to help teams build a healthy visual regression pipeline, and we did consider adding them at first. Visual regression testing is not a new concept plenty of other projects at Toptal already use it, including Picasso itself. Knowing the release would come with major design changes, and in an effort to minimize unexpected issues, it made sense to use visual regression testing techniques to help us find problems before the release. Last month, we rolled out a Picasso update to the Toptal Talent Portal, the platform our talent uses to find jobs and interact with clients. Every time a new version of our component library, Picasso, is released, we update all of our front-end applications to get the most out of the new features and align our designs across all parts of our site.
0 Comments
Leave a Reply. |