Developers September 29, 2020

We develop chrome extension, that allows automatically find differences between 2 images (elements screenshots). Is this useful for you?

Sergey @sdaleshin

Hi!

We are a frontend team and our QA team still check a lot of things
manually. So, we created a simple chrome extension for checking markup, checking pixel perfect. We just do screenshot of an DOM element and compare it with another element or uploaded image. As a result we get an image with difference between screenshots/images. We have some plans how to improve and extend this tool, but we would like your opinion.
Should we improve this? Could it be useful for you? Do you have same problems with testing like us?

Is pixel perfect test tool useful for you?
  1. Yes
  2. No
Vote
  1. 2

    I don't use it personally, our UI changes too frequently that it would just become a incumbent checking in.

    If you weren't aware there are already a number of services sort of in this category, see: https://docs.cypress.io/guides/tooling/visual-testing.html#Tooling

    1. 1

      Our UI changes fast too and this is a reason why we don't use cypress or selenium. We don't have time and resources to write automated tests. Sometimes we just need to check briefly before deploying on production manually.

      1. 1

        Ah I see, your tool is more to facilitate the manual review process.

        One of my pain points in testing other developers tickets is checking that they have implemented the design correctly. I have an eye for checking if it's pixel perfect so I don't need a tool to tell me it's wrong, however, I do spend manual time screenshotting both Figma and the web page to show the design inconsistency and then I have to list out all of the inconsistencies that I've spotted.

        Your tool kind of addresses it, however, I'd still need to take a screenshot of Figma and save it to my computer, which is too much friction.

        I'd say you should focus on integration with Figma (or another top design tool). Let me pick a Figma element and a dom element and give me the comparison screenshots. I recommend this because the plugin ecosystem of these apps is growing pretty quickly and it becomes a lot simpler to do comparisons for anyone in the team

        1. 1

          Thank you, for your idea. We thought about figma integration too. Now we just export some elements or artboards from figma as png file and it's not very convenient.

  2. 1

    I remember someone from my collegue generation implemented something like this as her master thesis project. It was oriented for visualizations. You can check it out here: https://books.google.com.co/books/about/Visual_Regression_Testing_for_Informatio.html?id=5JCczQEACAAJ&redir_esc=y and https://slides.com/nychi713/graphql/fullscreen#/15

    Regarding if I find it useful, I do not particularly since the products I make are not still in a phase were we care about being pixel perfect, but maybe if you ask devs in larger companies you might find that a better answer and feedback.

  3. 1

    I don't think your value prop is clear, "checking pixel perfect" doesn't make sense grammatically. Maybe "Automatically find differences between 2 images" makes more sense?

Recommended Posts