visual_regression.sh 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. #!/bin/bash
  2. # This script runs a visual regression test on all the images
  3. # generated from OSMD samples (npm run generate:current and npm run generate:blessed)
  4. #
  5. # inspired by and adapted from Vexflow's visual regression tests.
  6. #
  7. # Prerequisites: ImageMagick
  8. #
  9. # On OSX: $ brew install imagemagick
  10. # On Linux: $ apt-get install imagemagick
  11. #
  12. # Usage:
  13. #
  14. #
  15. # First generate the known good or previous state PNG images you want to compare to, e.g. the develop branch or last release:
  16. # (Server has to be running for this: npm start)
  17. #
  18. # npm run generate:blessed
  19. #
  20. # Make changes in OSMD, then generate your new images:
  21. #
  22. # npm run generate:current
  23. #
  24. # Run the regression tests against the blessed images in tests/blessed.
  25. #
  26. # npm run test:visual
  27. # # npm will navigate to the base folder automatically
  28. #
  29. # # or: (this should be done from the main OSMD folder)
  30. # # sh test/Util/visual_regression.sh
  31. #
  32. # Check visual_regression/diff/results.txt for results. This file is sorted
  33. # by PHASH difference (most different files on top.) The composite diff
  34. # images for failed tests (i.e., PHASH > 1.0) are stored in visual_regression/diff.
  35. #
  36. # If you are satisfied with the differences, copy *.png from visual_regression/current
  37. # into visual_regression/blessed, and submit your change.
  38. # PNG viewer on OSX. Switch this to whatever your system uses.
  39. # VIEWER=open
  40. # Show images over this PHASH threshold. This is probably too low, but
  41. # a good first pass.
  42. THRESHOLD=0.01
  43. # Directories. You might want to change BASE, if you're running from a
  44. # different working directory. (only necessary if you're running the script manually, i.e. not from npm run test:visual)
  45. BASE=.
  46. IMAGESPARENTFOLDER=$BASE/visual_regression
  47. BLESSED=$IMAGESPARENTFOLDER/blessed
  48. CURRENT=$IMAGESPARENTFOLDER/current
  49. DIFF=$IMAGESPARENTFOLDER/diff
  50. # All results are stored here.
  51. RESULTS=$DIFF/results.txt
  52. WARNINGS=$DIFF/warnings.txt
  53. # If no prefix is provided, test all images.
  54. if [ "$1" == "" ]
  55. then
  56. files=*.png
  57. else
  58. files=$1*.png
  59. fi
  60. # some sanity checks: check if some png images are in the right folder and warn if not. doesn't make sure there are actual, correct png images though.
  61. folderWarningStringMsg="Also, please run this npm script from the base OSMD folder. (npm run test:visual should do this automatically)
  62. Exiting without running visual regression tests.\n"
  63. # check if current directory exists / started from base OSMD folder
  64. if [ ! -e "$CURRENT" ]
  65. then
  66. printf "Warning: directory ${CURRENT} missing. Please run npm run generate:current (and if necessary npm run generate:blessed) first.
  67. ${folderWarningStringMsg}"
  68. exit 1
  69. fi
  70. # check if blessed directory exists / started from base OSMD folder
  71. if [ ! -e "$BLESSED" ]
  72. then
  73. printf "Warning: directory ${BLESSED} missing. Please run npm run generate:blessed first (or otherwise get the blessed images).
  74. ${folderWarningStringMsg}"
  75. exit 1
  76. fi
  77. # note: ls returns errors if the directory doesn't exist
  78. totalCurrentImages=`ls -l $CURRENT/*.png | wc -l | sed 's/[[:space:]]//g'`
  79. totalBlessedImages=`ls -l $BLESSED/*.png | wc -l | sed 's/[[:space:]]//g'`
  80. # check if there are some current images
  81. if [ "$totalCurrentImages" -lt 1 ]
  82. then
  83. printf "Warning: Found no pngs in ${CURRENT}. Please run npm run generate (and if necessary npm run blessed) first.
  84. ${folderWarningStringMsg}"
  85. exit 1
  86. fi
  87. # check if there are some blessed images
  88. if [ "$totalBlessedImages" -lt 1 ]
  89. then
  90. printf "Warning: Found no pngs in ${BLESSED}. Please run npm run blessed first, ideally on the repository's develop state.
  91. ${folderWarningStringMsg}"
  92. exit 1
  93. fi
  94. # check that #currentImages == #blessedImages (will continue anyways)
  95. if [ ! "$totalCurrentImages" -eq "$totalBlessedImages" ]
  96. then
  97. printf "Warning: Number of current images (${totalCurrentImages}) is not the same as blessed images (${totalBlessedImages}). Continuing anyways.\n"
  98. else
  99. printf "Found ${totalCurrentImages} current and ${totalBlessedImages} blessed png files (not tested if valid). Continuing.\n"
  100. fi
  101. mkdir -p $DIFF
  102. if [ -e "$RESULTS" ]
  103. then
  104. rm $DIFF/*
  105. fi
  106. touch $RESULTS
  107. touch $RESULTS.pass
  108. touch $RESULTS.fail
  109. touch $WARNINGS
  110. # Number of simultaneous jobs
  111. nproc=$(sysctl -n hw.physicalcpu 2> /dev/null || nproc)
  112. if [ -n "$NPROC" ]; then
  113. nproc=$NPROC
  114. fi
  115. total=`ls -l $BLESSED/$files | wc -l | sed 's/[[:space:]]//g'`
  116. echo "Running $total tests with threshold $THRESHOLD (nproc=$nproc)..."
  117. function ProgressBar {
  118. let _progress=(${1}*100/${2}*100)/100
  119. let _done=(${_progress}*4)/10
  120. let _left=40-$_done
  121. _fill=$(printf "%${_done}s")
  122. _empty=$(printf "%${_left}s")
  123. printf "\rProgress : [${_fill// /#}${_empty// /-}] ${_progress}%%"
  124. }
  125. function diff_image() {
  126. local image=$1
  127. local name=`basename $image .png`
  128. local blessed=$BLESSED/$name.png
  129. local current=$CURRENT/$name.png
  130. local diff=$current-temp
  131. if [ ! -e "$current" ]
  132. then
  133. echo "Warning: $name.png missing in $CURRENT." >$diff.warn
  134. return
  135. fi
  136. if [ ! -e "$blessed" ]
  137. then
  138. return
  139. fi
  140. cp $blessed $diff-a.png
  141. cp $current $diff-b.png
  142. # Calculate the difference metric and store the composite diff image.
  143. local hash=`compare -metric PHASH -highlight-color '#ff000050' $diff-b.png $diff-a.png $diff-diff.png 2>&1`
  144. local isGT=`echo "$hash > $THRESHOLD" | bc -l`
  145. if [ "$isGT" == "1" ]
  146. then
  147. # Add the result to results.text
  148. echo $name $hash >$diff.fail
  149. # Threshold exceeded, save the diff and the original, current
  150. cp $diff-diff.png $DIFF/$name.png
  151. cp $diff-a.png $DIFF/$name'_'Blessed.png
  152. cp $diff-b.png $DIFF/$name'_'Current.png
  153. echo
  154. echo "Test: $name"
  155. echo " PHASH value exceeds threshold: $hash > $THRESHOLD"
  156. echo " Image diff stored in $DIFF/$name.png"
  157. # $VIEWER "$diff-diff.png" "$diff-a.png" "$diff-b.png"
  158. # echo 'Hit return to process next image...'
  159. # read
  160. else
  161. echo $name $hash >$diff.pass
  162. fi
  163. rm -f $diff-a.png $diff-b.png $diff-diff.png
  164. }
  165. function wait_jobs () {
  166. local n=$1
  167. while [[ "$(jobs -r | wc -l)" -ge "$n" ]] ; do
  168. # echo ===================================== && jobs -lr
  169. # wait the oldest job.
  170. local pid_to_wait=`jobs -rp | head -1`
  171. # echo wait $pid_to_wait
  172. wait $pid_to_wait &> /dev/null
  173. done
  174. }
  175. count=0
  176. for image in $CURRENT/$files
  177. do
  178. count=$((count + 1))
  179. ProgressBar ${count} ${total}
  180. wait_jobs $nproc
  181. diff_image $image &
  182. done
  183. wait
  184. cat $CURRENT/*.warn 1>$WARNINGS 2>/dev/null
  185. rm -f $CURRENT/*.warn
  186. ## Check for files newly built that are not yet blessed.
  187. for image in $CURRENT/$files
  188. do
  189. name=`basename $image .png`
  190. blessed=$BLESSED/$name.png
  191. current=$CURRENT/$name.png
  192. if [ ! -e "$blessed" ]
  193. then
  194. echo " Warning: $name.png missing in $BLESSED." >>$WARNINGS
  195. fi
  196. done
  197. num_warnings=`cat $WARNINGS | wc -l`
  198. cat $CURRENT/*.fail 1>$RESULTS.fail 2>/dev/null
  199. num_fails=`cat $RESULTS.fail | wc -l`
  200. rm -f $CURRENT/*.fail
  201. # Sort results by PHASH
  202. sort -r -n -k 2 $RESULTS.fail >$RESULTS
  203. sort -r -n -k 2 $CURRENT/*.pass 1>>$RESULTS 2>/dev/null
  204. rm -f $CURRENT/*.pass $RESULTS.fail $RESULTS.pass
  205. echo
  206. echo Results stored in $DIFF/results.txt
  207. echo All images with a difference over threshold, $THRESHOLD, are
  208. echo available in $DIFF, sorted by perceptual hash.
  209. echo
  210. if [ "$num_warnings" -gt 0 ]
  211. then
  212. echo
  213. echo "You have $num_warnings warning(s):"
  214. cat $WARNINGS
  215. fi
  216. if [ "$num_fails" -gt 0 ]
  217. then
  218. echo "You have $num_fails fail(s):"
  219. head -n $num_fails $RESULTS
  220. else
  221. echo "Success - All diffs under threshold!"
  222. fi