Safe website upgrade

Make snapshots of the HTML output of a website before/after an upgrade.

Purpose

Were you ever nervous while upgrading/updating PHP interpreter, Redis server, Laravel framework, a PHP package, WordPress core or plugin?

Snapshot pages

Create snapshots in a timestamp-named directory.

1. Get list of pages - wget https://example.com/.well-known/safe-upgrade/urls
2. Download HTML pages and HTTP headers - wget -qSO- 1>page.html 2>page.headers
3. Check HTML pages - grep '</html>'
4. Find HTML errors - java -jar vnu.jar --errors-only
5. Fix line ends - dos2unix
6. Convert TAB characters - expand --tabs=4
7. Normalize to XML - xmlstarlet fo --html --recover 2>/dev/null
8. Remove always changing elements - xmlstarlet ed --delete '//path'
9. Reformat - xmllint --format
10. Take a screenshot - chromium --headless --screenshot=image.png

Compare two snapshots

colordiff -rsu -x "*.headers" -x "*.html" -x "*.html.lf" -x "*.html.lf.space" -x "*.xml.original" $(ls -dtr [1-9]*/|tail -n 2)
compare -verbose -metric mae $(ls -tr [1-9]*/image.png|tail -n 2) diff01.png