Episode 650 Visual Regression Testing and Side Projects With Yuri Gerasymov
Show Highlights
In this episode of The SDM Show, host Rob Cairns welcomes Yuri Gerasymov to discuss the critical role of visual regression testing in web development and the personal and professional benefits of managing side projects.
Thank You To Our Sponsor
Thanks you to our sponsor, All-in-One WP Migration by ServMask. Export your entire WordPress site in one click, import it anywhere. No server access needed, no command line, works with every hosting provider. Free on wordpress.org, Pro extension at servmask.com.
Show Notes
Understanding Visual Regression Testing
Visual regression testing focuses on ensuring a website’s appearance remains consistent after updates or code changes.
- What it monitors: Unlike functional testing, which checks if features (like buttons) work, visual testing verifies that elements haven’t shifted, changed color, or experienced font glitches.
- How it works: Developers take “baseline” screenshots of key pages. After a deployment or update, the system takes new screenshots and compares them against the baselines to highlight any discrepancies.
- Selection Strategy: Rather than testing every single page, which is resource-intensive, Yuri suggests two methods:
- Layout-Based: Testing unique page templates and block combinations.
- Analytics-Based: Using data to identify and test the top 30–50 most-visited pages.
- Common Oversight: Many talented designers and developers focus on speed and functionality but often miss visual regressions or security vulnerabilities during the update process.
The Logistics of Testing
- Dynamic Elements: A key challenge is “freezing” dynamic content like sliders or running bars to avoid “false positives” during image comparison.
- Device Coverage: Testing should cover different breakpoints—primarily mobile (accounting for 50–60% of traffic), tablets, and desktops.
- Browser Trends: While multi-browser testing is a best practice, the dominance of the Chrome engine and modern frameworks has made visual discrepancies across browsers less common than they were a decade ago.
The Power of Side Projects
Yuri shares his experience running Diffy, a visual regression testing tool, as a side project while maintaining a full-time engineering role.
- Benefits:
- Skill Diversity: It allows developers to experience the business, marketing, and support aspects of a product, providing a broader perspective than coding alone.
- Financial Security: Side projects act as a “safety net” in an unpredictable tech market.
- Community Connection: Side projects provide a reason to stay active in open-source communities (like Drupal and WordPress) and attend conferences.
- Advice for Growth: As a project scales, delegation is essential. Yuri notes that while he can outsource development and marketing, he still personally handles high-level strategy and client communication.
PocketCasts
Radio Public
Spotify
Stitcher
Apple Podcasts
Amazon Music
