One missing ad can cause two screenshots to be reported as completely different when using regular pixel-to-pixel diffing. This little experiment tries to do something a bit more sophisticated and compares images line by line using git-like diffing algorithm. It works pretty well for single column layouts, but fails in multi-column scenarios.
git clone
npm i
node main
- Paths to input images are hadcoded (YOLO).
- It's rather slow (I only added a fast path for identical pixels).
- As mentioned in the description, this works well only for single column layouts (which are not as popular as one may think). There are probably better, and more sophisticated, techniques of comparing website screenshots out there (let me know if you find one!).
Other projects you may want to check out:
- https://github.com/reg-viz/x-img-diff-js - structual information diffing
- https://github.com/reg-viz/img-diff-js - traditional pixel-to-pixel diffing
MIT