3 ms·

Show HN: Automatically detect visual bugs on responsive websites via ML

7 points by zvonimirs 4y ago

Hi HN! My friend and I just launched the initial version of Responsiveye (https://responsiveye.com) - the first tool that automatically detects visual bugs on responsive websites. Whenever we worked on a web app that was visually intensive and had many users we had trouble with visual bugs slipping through the QA. That is likely because visual testing is very repetitive. For every CSS change, QA needs to scale the browser window many times to check every single element and how it behaves on different screen sizes. I tried a couple of tools to help us with this but all solutions I found focused on visual regression testing which comes with a lot of maintenance. That is where the idea for Responsiveye came from. We were wary if the full automatization of testing was achievable technically but it ended up working quite well. We are still in the alpha stage but we would love to get your feedback and scan your website for visual bugs. You can submit your website for testing (no signup required) on https://responsiveye.com/ and also see examples of websites of well known companies that we found bugs on (Adobe, Dell, etc). If you find this helpful, please let us know and sign up to get access to the latest updates - we are planning to have more bug detections on a weekly basis.

O__________O 4y ago
On mobile, the demo video is too small and unable to maximize it. Do you have a direct link to the video? Demo links to major websites shown in the first few seconds of the demo video are also not showing on mobile. Links? Maybe not understanding your solution, but both of these appear to be bugs your own solution should have picked up; and/or you manually noticed.
- zvonimirs 4y ago
  Hey, yea, here it is - https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35
  - O__________O 4y ago
    Thanks, watched the video, though given only one bug is shown and there’s no explanation of how you’re detecting bugs or the types of visual bugs you know you’re currently unable to detect — feels like at best the solution just randomly finds bugs. Might be worth having list of types of bugs you detect with animated GIFs that’s viewable on any device — instead of having the demo of major sights; understand the reasoning of having and going after major businesses, but for a demo, it’s time consuming. Mobile version also has no option to submit a URL for testing; which shouldn’t matter and could clearly state a desktop would be required before (or after) submitting the request.
    - zvonimirs 4y ago
      Great feedback, thanks. Yea, more on the bugs that we're able to find now and are planning to cover in the future is listed here: https://www.responsiveye.com/roadmap https://www.responsiveye.com/roadmap But yea, makes sense to talk more about how we find these bugs in the video as well.
    - zvonimirs 4y ago
      Btw, we added the "try out" form on the mobile as well so you can submit your page as well through mobile :)
- zvonimirs 4y ago
  Yes, the app itself (where you can see bugs on websites) is not supported on mobile devices. The interface is similar to browser developer tools which is too bulky for mobile. Can you open up https://responsiveye.com/ https://responsiveye.com/ on a computer?
  - O__________O 4y ago
    Fair enough, but you should tell mobile users that. Also, while not the live demo, per major site on the home page, for mobile, you could just have a loom (that is resizable) that makes it clear on desktop your able to see the tool live, but offer a pre-recorded walk through for mobile users. As is, given you’re pitching detecting resizing bugs, you should not have any on your sight that are not addressed; one thing not to acknowledge there’s content of functionality missing, another to not even acknowledge users are missing them by being on a given device.
    - zvonimirs 4y ago
      Thanks for the feedback. I did write on the home page to open the site on desktop but seems it's not that visible. I'll update it.
      - O__________O 4y ago
        Super, thanks for the quick replies. All and all, I am surprised no one has coded an automated visual difference detection service for responsive. Thought about it in the past, but mainly for indexing websites, not doing QA on responsive templates. Aside from the responsive aspect, you could also test the “reader mode”, no-JavaScript, etc for missing content. As a sales “growth hack” — you could scan LinkedIn for people that would likely be a top contact for web QA/dev or marketing— and ping them to tell them you found a bug on the homepage and offer to QA there top 20 pages for free.
      - yodon 4y ago
        From a marketing perspective it's likely most visitors will hit your site first on mobile. You probably need to deliver enough value on mobile to get the person to remember you when they return to their laptop. If you offer no info on mobile your conversion rate in getting visitors to go through the hassle of finding you again on their laptop/desktop is likely to be very low.
zvonimirs 4y ago
Website link: https://responsiveye.com/ https://responsiveye.com/ Explanation video link: https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 reply

7 points by zvonimirs 4y ago

O__________O 4y ago

On mobile, the demo video is too small and unable to maximize it. Do you have a direct link to the video? Demo links to major websites shown in the first few seconds of the demo video are also not showing on mobile. Links? Maybe not understanding your solution, but both of these appear to be bugs your own solution should have picked up; and/or you manually noticed.

zvonimirs 4y ago
Hey, yea, here it is - https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35
- O__________O 4y ago
  Thanks, watched the video, though given only one bug is shown and there’s no explanation of how you’re detecting bugs or the types of visual bugs you know you’re currently unable to detect — feels like at best the solution just randomly finds bugs. Might be worth having list of types of bugs you detect with animated GIFs that’s viewable on any device — instead of having the demo of major sights; understand the reasoning of having and going after major businesses, but for a demo, it’s time consuming. Mobile version also has no option to submit a URL for testing; which shouldn’t matter and could clearly state a desktop would be required before (or after) submitting the request.
  - zvonimirs 4y ago
    Great feedback, thanks. Yea, more on the bugs that we're able to find now and are planning to cover in the future is listed here: https://www.responsiveye.com/roadmap https://www.responsiveye.com/roadmap But yea, makes sense to talk more about how we find these bugs in the video as well.
  - zvonimirs 4y ago
    Btw, we added the "try out" form on the mobile as well so you can submit your page as well through mobile :)
zvonimirs 4y ago
Yes, the app itself (where you can see bugs on websites) is not supported on mobile devices. The interface is similar to browser developer tools which is too bulky for mobile. Can you open up https://responsiveye.com/ https://responsiveye.com/ on a computer?
- O__________O 4y ago
  Fair enough, but you should tell mobile users that. Also, while not the live demo, per major site on the home page, for mobile, you could just have a loom (that is resizable) that makes it clear on desktop your able to see the tool live, but offer a pre-recorded walk through for mobile users. As is, given you’re pitching detecting resizing bugs, you should not have any on your sight that are not addressed; one thing not to acknowledge there’s content of functionality missing, another to not even acknowledge users are missing them by being on a given device.
  - zvonimirs 4y ago
    Thanks for the feedback. I did write on the home page to open the site on desktop but seems it's not that visible. I'll update it.
    - O__________O 4y ago
      Super, thanks for the quick replies. All and all, I am surprised no one has coded an automated visual difference detection service for responsive. Thought about it in the past, but mainly for indexing websites, not doing QA on responsive templates. Aside from the responsive aspect, you could also test the “reader mode”, no-JavaScript, etc for missing content. As a sales “growth hack” — you could scan LinkedIn for people that would likely be a top contact for web QA/dev or marketing— and ping them to tell them you found a bug on the homepage and offer to QA there top 20 pages for free.
    - yodon 4y ago
      From a marketing perspective it's likely most visitors will hit your site first on mobile. You probably need to deliver enough value on mobile to get the person to remember you when they return to their laptop. If you offer no info on mobile your conversion rate in getting visitors to go through the hassle of finding you again on their laptop/desktop is likely to be very low.

zvonimirs 4y ago

Website link: https://responsiveye.com/ https://responsiveye.com/ Explanation video link: https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 https://www.loom.com/share/7c7ed621d030428e979ac6111c8bcb35 reply