news-homepages VS pixelmatch

Here's my simple uBlock script with Node.js. It follows the documented example from the Playwright devs here. It is run by the Action logic here. The job finishes successfully and saves a screenshot. The ad blocker doesn't work. The page is filled with the typical stuff.

Yes - you can run extra JavaScript to hide those before you take the screenshot. Example here: https://github.com/palewire/news-homepages/issues/4#issuecom...

I'm the dev for a javascript-based reddit bot that implements image comparisons using both pixel matching and/or perceptual hashes (that could be stored in a DB). I'd be happy to go over high-level or implementation details if its something your team would be interested in. Either on github or elsewhere.

There are quite a few image comparison libraries in pure Javascript for both node and browser.

You could absolutely get this working with GitHub Actions with a bit of creativity.

I've been playing around with my own image-diff tool for this kind of thing, but it's not yet in a decent state: https://github.com/simonw/image-diff - there are other, better options out there such as https://github.com/mapbox/pixelmatch

Needle is an older system that did this using Selenium - updating that to work with Playwright (or Playwight via shot-scraper) would be an interesting project: https://github.com/python-needle/needle

Internally, Playwright Test uses the pixelmatch library to compare screenshots for visual differences. It is possible to pass several options to this library, to fine-tune the comparison of images. The most important option is the threshold option, which indicates the threshold amount of differences allowed between two images.

Other use-cases include combining screenshots with the Autocode scheduler, a file hosting platform like Box, and a package like pixelmatch to create daily screenshot diffs for regression testing.