Compare two webpages

Compare-web-pages.md

Comparing two webpages

Requirements

• imagemagick (the compare command)
• webkit2png

Installation

Mac OSX

curl -O https://gist.githubusercontent.com/eigan/a2f418371925afe62226/raw/webdiff.sh
chmod 755 webdiff.sh
mv webdiff.sh /usr/local/bin/webdiff

Linux

wget https://gist.githubusercontent.com/eigan/a2f418371925afe62226/raw/webdiff.sh
chmod 755 webdiff.sh
mv webdiff.sh /usr/local/bin/webdiff

Usage

Usage webdiff path [-ouUrRv]
 o path	: Output directory
 u url	: Original base url
 U url	: Modified base url
 r num	: Resolution mobile
 R num	: Resolution desktop
 v	: Show settings applied

The output directory will look like this when done:

.../
.../users/
.../users/desktop-mod-full.png
.../users/mobile-mod-full.png
.../users/mobile-orig-full.png
.../users/mobile-orig-full.png
.../users-mobile-diff.png
.../users-desktop-diff.png
.../<...>/
[...]

example.sh

# Where to put the screenshots
OUTPUT_DIR=$(dirname $0)

# List of urls to check
urls=(
    /
    /users
    /example
)

for url in ${urls[@]}; do
    sh webdiff.sh $url -o $OUTPUT_DIR
done

webdiff.sh

# WEBDIFF
# Small wrapper for webkit2png and imagemagick
# for snapping picture of a website and comparing them

# URL to the original version of the webpage
orig_base_url="https://staging-loftet.corepublish.no"

# URL to the modified version of the webpage
mod_base_url="http://dev4-loftet.corepublish.no"

# Default value for -o
output_dir=$(pwd)

# Desktop resolution
resolution_desktop=1200

# Mobile resolution
resolution_mobile=768

# Show settings
verbose=false

if [[ $1 == -* ]] || [[ -z "$1" ]]; then
    echo "Usage webdiff path [-ouUrRv]"
    echo -e " o path\t: Output directory"
    echo -e " u url\t: Original base url"
    echo -e " U url\t: Modified base url"
    echo -e " r num\t: Resolution mobile"
    echo -e " R num\t: Resolution desktop"
    echo -e " v\t: Show settings applied"
    exit
fi

# Get the options
while getopts "o:u:U:r:R:v" flag ${@:2}; do
  case "${flag}" in
    o) output_dir="${OPTARG}" ;;
    u) orig_base_url="${OPTARG}" ;;
    U) mod_base_url="${OPTARG}" ;;
    r) resolution_mobile="${OPTARG}" ;;
    R) resolution_desktop="${OPTARG}" ;;
    v) verbose=true
  esac
done

# Print settings if -v option is true
if [ $verbose == true ]; then
    echo "-- Settings --"
    echo -e "Original base url:\t $orig_base_url"
    echo -e "Modified base url:\t $mod_base_url"
    echo -e "Mobile resolution:\t $resolution_mobile"
    echo -e "Desktop resolution:\t $resolution_desktop"
    echo -e "Output dir:\t\t $output_dir"
    echo "--"
    echo "Run without -v to start"
    echo "--"
    exit
fi

# Set filename to index.png instead of /.png
FILENAME=$(echo "$1" | sed 's/\///g')
if [ -z "$FILENAME" ]; then
    FILENAME="index"
fi

path_output_dir="$output_dir/$FILENAME"
mkdir -p $output_dir

# Take snapshot of webpage
webkit2png -W $resolution_desktop -F -D $path_output_dir -o desktop-orig $orig_base_url$1
webkit2png -W $resolution_desktop -F -D $path_output_dir -o desktop-mod $mod_base_url$1
webkit2png -W $resolution_mobile -F -D $path_output_dir -o mobile-orig $orig_base_url$1
webkit2png -W $resolution_mobile -F -D $path_output_dir -o mobile-mod $mod_base_url$1

# Compare images
compare -dissimilarity-threshold 40 -similarity-threshold 1 -subimage-search "$path_output_dir/desktop-mod-full.png" "$path_output_dir/desktop-orig-full.png" "$path_output_dir/$FILENAME-desktop-diff.png"
compare -dissimilarity-threshold 40 -similarity-threshold 1 -subimage-search "$path_output_dir/mobile-mod-full.png" "$path_output_dir/mobile-orig-full.png" "$path_output_dir/$FILENAME-mobile-diff.png"