Live data from Hacker News

Wraith – A screenshot comparison tool from the BBC

github.com

21–30 of 38 posts

Re: Wraith – A screenshot comparison tool from the BBC

#21

I would love to see this integrated with something like GitHub's image diff presenter. Example: https://github.com/cameronmcefee/Image-Diff-View-Modes/commi... Information: https://github.com/blog/817-behold-image-view-modes

... I had a prototype that did that.

Re: Wraith – A screenshot comparison tool from the BBC

#22

I would love to see this integrated with something like GitHub's image diff presenter. Example: https://github.com/cameronmcefee/Image-Diff-View-Modes/commi... Information: https://github.com/blog/817-behold-image-view-modes

You would just need to run a script that runs phantomjs (casperjs and you can run tests at the same time) and saves screenshots of different pages in your app. Then it checks in the images (possibly in a different repo that is just for comparing screenshots). This could be done as part of continuous integration. Whenever deploying one could generate a compare view with the last deployed revision.

Re: Wraith – A screenshot comparison tool from the BBC

#23
post #2

I don't see the value of this. What sort of use case does this have?

Disclosure: I'm a developer of this tool & work for BBC News. We use this for catching things that we'd never spot, a good example of how it has helped us is after a giant Sass refactor, we ran this tool against the old CSS site and the new CSS site, this showed us where things were off by a pixel or two (as well as big formatting changes). We've found this tool rather valuable, we're not saying everyone will, or tha…

Thank you.

Re: Wraith – A screenshot comparison tool from the BBC

#24
post #3

See also https://github.com/bslatkin/dpxdt , a more featureful/complex implementation of the same idea. It also has some discussion of why you'd want to do this.

Brett, the creator of dpxdt, gave a talk on this project a few months ago at Mozilla's SF office. Video can be found here:

https://air.mozilla.org/continuous-delivery-at-google/

Re: Wraith – A screenshot comparison tool from the BBC

#25
I am interested in limited image recognition and pattern matching for an iPad app of mine. For example, I'd like to recognize when there are the red, yello, and green buttons to the left of a point in an image and the edge of an active window just above, so I can provide instant feedback of some kind (probably based on a filtered+recolored version of the top of the window which is being moved) for a VNC app. Eventually, there will be feedback from the server, but limited feedback generated locally will feel much better.

Any recommendations? I already know of OpenCV.

Re: Wraith – A screenshot comparison tool from the BBC

#26

I am interested in limited image recognition and pattern matching for an iPad app of mine. For example, I'd like to recognize when there are the red, yello, and green buttons to the left of a point in an image and the edge of an active window just above, so I can provide instant feedback of some kind (probably based on a filtered+recolored version of the top of the window which is being moved) for a VNC app. Eventual…

I'm by no means a computer vision expert, nor did any of my education cover the subject, but I have been dabbling in it long enough that I started a company based on limited CV.

What I do is think of ways I can cheat. Sometimes an algorithm that looks really complex in mathematical notation boils down to a for loop for X, and a for loop for Y, iterating over every pixel in the image looking for some feature.

If you know where your buttons will appear, roughly, you can scan that rectangle in your double for loop until you hit a long enough sequence of red, then continue scanning for a sequence of yellow, then green. If you're looking for the edge of a window, scan for a solid line of the window border color.

Basically, think of the simplest possible way to express what you want to know. Your algorithm doesn't need to have a clue what a button is, or have any real intelligence. It feels like cheating, really, but it works quite well for simple tasks.

Re: Wraith – A screenshot comparison tool from the BBC

#27
post #14

Is there any reason why you couldn't do this non-visually? That is, using PhantomJS to determine that a DOM element is within certain bounds for a position using if statements?

Automated layout analysis is pretty tricky. The data reported from the DOM is not always reliable, so it's helpful to couple it with computer vision data. I spoke about an integrated approach at Selenium Conf 2013: http://www.youtube.com/watch?v=DF0QUD0kuiQ

Re: Wraith – A screenshot comparison tool from the BBC

#28
post #3

See also https://github.com/bslatkin/dpxdt , a more featureful/complex implementation of the same idea. It also has some discussion of why you'd want to do this.

I wrote https://github.com/gabrielrotbart/gatling ages ago. It integrates visual testing into normal Rspec specs. Focusing on specific elements rather than full pages, makes it more stable.

Maybe it's time to revive it.

Re: Wraith – A screenshot comparison tool from the BBC

#29

I am interested in limited image recognition and pattern matching for an iPad app of mine. For example, I'd like to recognize when there are the red, yello, and green buttons to the left of a point in an image and the edge of an active window just above, so I can provide instant feedback of some kind (probably based on a filtered+recolored version of the top of the window which is being moved) for a VNC app. Eventual…

I'm by no means a computer vision expert, nor did any of my education cover the subject, but I have been dabbling in it long enough that I started a company based on limited CV. What I do is think of ways I can cheat. Sometimes an algorithm that looks really complex in mathematical notation boils down to a for loop for X, and a for loop for Y, iterating over every pixel in the image looking for some feature. If you k…

Sounds good. But I've also heard that there are template based algorithms, which would seem to be advantageous for implementing window corner recognition in a variety of operating systems. Basically, I'd just need some images from screenshots. That plus some edge detection would get me most of the way there.

Re: Wraith – A screenshot comparison tool from the BBC

#30
post #17
post #14

Is there any reason why you couldn't do this non-visually? That is, using PhantomJS to determine that a DOM element is within certain bounds for a position using if statements?

There's a few reasons: Simplicity. This automatically tests the whole page "for free". Robustness of feedback for time spent. A small visual change could cascade into lots of tests cases that must be updated (rendering is hard, look how long it took IE to get it right). You don't need to update any tests with this tool, you just give the OK to a visual diff with expected changes. Dynamic content. The BBC homepage is…

More importantly, you don't need someone technical to tell if it's an important change. This can easily be signed off by QA, designers, PMs, etc. They can see what it was before, after and what changed and decide if that's OK.

Also, the difference between a wanted visual change and a break is dependent on the change you want. That makes this quite a flexible tool (it's not just "any difference is wrong") that can be used simply and is unlikely to have false negatives (while making it easy to ignore false positives).

Post reply on HN