History fails on Patternlab sites

Question

History fails on Patternlab sites

jcarverEinc opened this issue 7 years ago · comments

Wraith fails to capture Patternlab sites with CasperJS - works with PhantomJS.

We have been using wraith history successfully tracking changes on certain css elements on our projects, but cannot track Patternlab sites (http://demo.patternlab.io) using an almost default history.yaml, having changed only the domains and commenting out the stock path options and leaving 'path: /'.

No errors reported. It just says snapping but creates no files:

Snapping http://demo.patternlab.io/ at: 320x1500
Snapping http://demo.patternlab.io/ at: 600x768
Snapping http://demo.patternlab.io/ at: 768x1500
Snapping http://demo.patternlab.io/ at: 1024x1500
Snapping http://demo.patternlab.io/ at: 1280x1500

Thanks.

Reporting a problem? Please describe the issue above, and complete the following checklist so that we can help you more quickly.

Issue checklist:

[X ] I have validated my config file against YAML Validator to make sure it is valid YAML.
[ X] I have run the wraith info command and pasted the output below:

DEBUG: #################################################
DEBUG:   Command run:        info
DEBUG:   Wraith version:     4.0.1
DEBUG:   Ruby version:       ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin15]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.8-3 Q16 x86_64 2017-03-25 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   CasperJS version:   1.1.4
DEBUG: #################################################

I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:

Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
DEBUG: casperjs  '/Users/jud.carver/.rvm/gems/ruby-2.3.3/gems/wraith-4.0.1/lib/wraith/javascript/casper.js' 'http://demo.patternlab.io/' '320,600x768,768,1024,1280' 'shots/home/MULTI_casperjs_english.png' 'body' '/Users/jud.carver/Projects/qa_tools/wraith/javascript/wait--casper.js' 'false'
Snapping http://demo.patternlab.io/ at: 320x1500

Snapping http://demo.patternlab.io/ at: 600x768

Snapping http://demo.patternlab.io/ at: 768x1500

Snapping http://demo.patternlab.io/ at: 1024x1500

Snapping http://demo.patternlab.io/ at: 1280x1500

I have pasted the contents of my config file below:

##############################################################
##############################################################
# This is an example configuration provided by Wraith.
# Feel free to amend for your own requirements.
# ---
# This particular config is intended to demonstrate how
# to use Wraith in 'history' mode, which is best suited to
# making sure your site's appearance remains consistent over
# time.
#
# `wraith history history.yaml` # generate base screenshots
# `wraith latest history.yaml`  # take new shots and compare
#
##############################################################
##############################################################

# (required) The engine to run Wraith with. Examples: 'phantomjs', 'casperjs', 'slimerjs'
browser: "casperjs"

# (required) The domain to take screenshots of.
domains:
  english: "http://demo.patternlab.io"

# (required) The paths to capture. This particular config is using casperjs, so we can take screenshots of selectors rather than the entire page.
paths:
  home:
    path: /
  #   selector: '.idt__news' # (optional) selector to take a screenshot of
  #   clickable_guide__after_click:
  #   path: /news/entertainment-arts-27221191
  #   selector: '.idt__news'
  #   before_capture: 'javascript/interact--casper.js' # (optional) JavaScript file to execute before taking the screenshot of this path.

# (optional) JavaScript file to execute before taking screenshot of every path. Default: nil
before_capture: 'javascript/wait--casper.js'

# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.
screen_widths:
  - 320
  - 600x768
  - 768
  - 1024
  - 1280

# (optional) Resize to each screen width (efficient), or reload at each screen width (costly). Default: 'reload'
resize_or_reload: 'resize'

# (required for history mode, otherwise optional) The directory that your base screenshots will be stored in.
history_dir: 'shots_base'

# (required) The directory that your latest screenshots will be stored in
directory: 'shots'

# (required) Amount of fuzz ImageMagick will use when comparing images. A higher fuzz makes the comparison less strict.
fuzz: '20%'

# (optional) The maximum acceptable level of difference (in %) between two images before Wraith reports a failure. Default: 0
threshold: 5

# (optional) Specify the template (and generated thumbnail sizes) for the gallery output.
gallery:
  template: 'slideshow_template' # Examples: 'basic_template' (default), 'slideshow_template'
  thumb_width:  200
  thumb_height: 200

# (optional) Choose which results are displayed in the gallery, and in what order. Default: alphanumeric
# Options:
#   alphanumeric - all paths (with or without a difference) are shown, sorted by path
#   diffs_first - all paths (with or without a difference) are shown, sorted by difference size (largest first)
#   diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
# Note: different screen widths are always grouped together.
mode: diffs_first

# (optional) Choose to run Wraith in verbose mode, for easier debugging. Default: false
verbose: true

# (optional) Color to highlight the image diff. Default: 'blue'
highlight_color: red

# (optional) Parameters to pass to Phantom/Casper command line. Default: '--ignore-ssl-errors=true --ssl-protocol=tlsv1'
phantomjs_options: ''