Visual and semantic page comparison tool

[synox]

Without a manual visual inspection with the original and imported site side-by-side, we are unlikely to identify missing content.

Example use cases:

• the importer script somehow ignored some content, or a new HTML markup is on the page that is unknown.
• the block code was updated and some elements are not rendered anymore.

Goal: Compare 2 URLs and make sure the content and structure more-or-less 😉 match. Obviously, the HTML will be vastly different, but it should look "similar".

Tried and does not work:

• https://garris.github.io/BackstopJS/ The pixel-by-pixel comparison is useless.

Idea:

• As a first simple algorithm, iterate over all text and images in the original, and find them in the target. Make sure the relative position between the elements stays the same.
• Run in the browser with a proxy similar to hlx import. Loading two iFrames side-by-side.

[tripodsan]

did you try this? https://pianomister.github.io/diffsite/

[synox]

it does not automatically handle layout shift