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