1 point by omnirio 6 months ago flag hide 26 comments
johnsmith 6 months ago next
This is amazing! I've been looking for something like this to streamline my design workflow. I'd love to hear more about the tech stack you used to build it.
original_poster 6 months ago next
I built the tool using React for the frontend, and Cypress for the end-to-end testing framework. It also utilizes a REST API to handle the comparisons of the screenshots.
janedoe 6 months ago prev next
That's great. I'm wondering if it can catch subtle changes such as font size adjustments and changes in color gradients.
original_poster 6 months ago next
Yes, it can catch those subtle changes as well as larger ones like layout changes, new elements, or missing elements. I used Cypress's visual regression capabilities to match images and identify the differences.
wonderfulredditor 6 months ago prev next
It's nice to see more design tools come to Hacker News! I'm curious about the comparison process: how long does it take to compare two screenshot images?
original_poster 6 months ago next
The comparison process is virtually instantaneous when running the tests locally. It depends on the number and complexity of the screenshots, but I have not noticed a slow comparison process so far. I hope that helps!
frontendguru 6 months ago prev next
With this tool, I could get my team on board with visual regression testing - I'll be sure to check it out. What was the hardest part to build in this tool?
original_poster 6 months ago next
The most challenging part of the project was handling different image formats, resolutions, and browser viewport settings to ensure non-breaking tests for various scenarios. Thank you, and good luck to your team with visual regression tests!
brainyuser 6 months ago prev next
Can it work with local running applications as well as deployed ones?
original_poster 6 months ago next
Yes, you can connect it to your design environment as well as deployed applications. It's designed to be flexible for various use cases.
thoughtfulposter 6 months ago prev next
Is this abstraction layer over existing tools or a fully custom-built solution?
original_poster 6 months ago next
I built it from scratch as a fully custom solution to make it tailored specifically for designers. Thanks for your interest!
interestedparticipant 6 months ago prev next
How did you manage to make this work with complex design applications like Figma?
original_poster 6 months ago next
I created API integrations to connect the tool with several design platforms like Figma, Adobe XD, and Sketch. The integration allows you to pull design assets from those platforms and compare them through the tool.
keenobserver 6 months ago prev next
Could this solution be used for dynamic web pages where content changes frequently?
original_poster 6 months ago next
While you can use it to test the visual regression of dynamic web pages, the tests will compare the pages at a specific point in time. It's not dynamic in the sense that it continuously compares web pages while users interact with them.
proactiveprofessional 6 months ago prev next
I assume there's an option to test single elements and not just full pages. How does this work?
original_poster 6 months ago next
Yes, you can test single elements as well. You specify the area of the screenshot you want to test through a CSS selector or user-defined region. That allows you to target specific elements and visuals.
geekyme 6 months ago prev next
Are there any plans to integrate this tool with common CI/CD frameworks such as Jenkins or CircleCI?
original_poster 6 months ago next
Yes, integrations with popular CI/CD pipelines are already on my roadmap. Stay tuned for updates - I'm glad you asked!
visionarycontractor 6 months ago prev next
What's the difference between this and tools such as Wraith or BackstopJS?
original_poster 6 months ago next
While tools like Wraith and BackstopJS are great visual regression testing frameworks, my solution offers features more tailored to designers, including easier test creation, alerts for subtle changes, and customizable visual indicators.
fxsshell 6 months ago prev next
Have you considered implementing a machine learning component that helps detect false positives?
original_poster 6 months ago next
Yes, I have been exploring machine learning approaches to reduce false positives. While still in its infancy, the integration will bring more value to the tool, and I hope to release more details soon.
codewrangler 6 months ago prev next
Great work on the tool. Are there any plans to open-source its codebase to the community?
original_poster 6 months ago next
I appreciate the kind words. Currently, I'm considering open-sourcing parts of the codebase with detailed documentation and examples. Please check back soon for updates.