Giters

bbc / wraith

Wraith — A responsive screenshot comparison tool

Home Page:http://bbc-news.github.io/wraith/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fetched JSON not occurring in React with PhantomJS?

JimmyMultani opened this issue · comments

commented

I'm having a bit of trouble showing console errors from my React webapp when capturing with PhantomJS. When I look at the results, it doesn't render/parse JSON information that I'm calling through github's fetch API.

module.exports = function (phantom, ready) {  
  phantom.onConsoleMessage = function(msg, lineNum, sourceId) {
    console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
  };
  
  phantom.onResourceError = function(resourceError) {
    console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
    console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
  };

  phantom.onError = function(msg, trace) {
    var msgStack = ['ERROR: ' + msg];

    if (trace && trace.length) {
      msgStack.push('TRACE:');
      trace.forEach(function(t) {
        msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
      });
    }

    console.error(msgStack.join('\n'));
  };
  
  // make Wraith wait a bit longer before taking the screenshot
  setTimeout(ready, 2000); // you MUST call the ready() callback for Wraith to continue
}

Any assistance would be greatly appreciated, thanks!

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

Issue checklist:

  • I have validated my config file against YAML Validator to make sure it is valid YAML.

  • I have run the wraith info command and pasted the output below:

DEBUG: #################################################
DEBUG:   Command run:        info
DEBUG:   Wraith version:     4.0.0
DEBUG:   Ruby version:       ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.7-3 Q16 x86_64 2017-01-07 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   CasperJS version:   1.1.2
DEBUG: #################################################
  • I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:
DEBUG: #################################################
DEBUG:   Command run:        capture configs/capture.yaml
DEBUG:   Wraith version:     4.0.0
DEBUG:   Ruby version:       ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.7-3 Q16 x86_64 2017-01-07 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   CasperJS version:   1.1.2
DEBUG: #################################################
Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '320' 'results/article/320_phantomjs_development.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '320' 'results/article/320_phantomjs_live.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '768' 'results/article/768_phantomjs_development.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '768' 'results/article/768_phantomjs_live.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '1024' 'results/article/1024_phantomjs_development.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '1024' 'results/article/1024_phantomjs_live.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '1280' 'results/article/1280_phantomjs_development.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
DEBUG: phantomjs  '/Library/Ruby/Gems/2.0.0/gems/wraith-4.0.0/lib/wraith/javascript/phantom.js' 'http://localhost:8080/article/22' '1280' 'results/article/1280_phantomjs_live.png' 'body' 'false' '/Users/jimmymultani/Projects/evree/wraith/javascript/config-phantom.js'
Loading http://localhost:8080/article/22 at dimensions: 1280x1500

Loading http://localhost:8080/article/22 at dimensions: 768x1500

Loading http://localhost:8080/article/22 at dimensions: 1280x1500

Loading http://localhost:8080/article/22 at dimensions: 320x1500

Loading http://localhost:8080/article/22 at dimensions: 320x1500

Loading http://localhost:8080/article/22 at dimensions: 1024x1500

Loading http://localhost:8080/article/22 at dimensions: 768x1500

Loading http://localhost:8080/article/22 at dimensions: 1024x1500

Snapping http://localhost:8080/article/22 at: 768x1500

Snapping http://localhost:8080/article/22 at: 1280x1500

Snapping http://localhost:8080/article/22 at: 320x1500

Snapping http://localhost:8080/article/22 at: 320x1500

Snapping http://localhost:8080/article/22 at: 1280x1500

Snapping http://localhost:8080/article/22 at: 768x1500

Snapping http://localhost:8080/article/22 at: 1024x1500

Snapping http://localhost:8080/article/22 at: 1024x1500

CROPPING IMAGES
DEBUG: Both images are exactly 1024x1500 - no cropping required. (results/article/1024_phantomjs_development.png, results/article/1024_phantomjs_live.png)
DEBUG: Both images are exactly 320x1500 - no cropping required. (results/article/320_phantomjs_development.png, results/article/320_phantomjs_live.png)
DEBUG: Both images are exactly 1280x1500 - no cropping required. (results/article/1280_phantomjs_development.png, results/article/1280_phantomjs_live.png)
DEBUG: Both images are exactly 768x1500 - no cropping required. (results/article/768_phantomjs_development.png, results/article/768_phantomjs_live.png)
COMPARING IMAGES
Comparing results/article/1024_phantomjs_development.png and results/article/1024_phantomjs_live.png
Comparing results/article/1280_phantomjs_development.png and results/article/1280_phantomjs_live.png
Comparing results/article/320_phantomjs_development.png and results/article/320_phantomjs_live.png
Comparing results/article/768_phantomjs_development.png and results/article/768_phantomjs_live.png
Saved diff
Saved diff
Saved diff
Saved diff
GENERATING THUMBNAILS
GENERATING GALLERY
Gallery generated

View the gallery in your browser:
	 file:///Users/jimmymultani/Projects/evree/wraith/results/gallery.html
  • 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 'capture' mode, which is best suited to
# comparing a test and live version of the same website.
#
# `wraith capture capture.yaml`
#
##############################################################
##############################################################

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

# (required) The domains to take screenshots of.
domains:
  development: "http://localhost:8080"
  live: "http://localhost:8080"

# (required) The paths to capture. All paths should exist for both of the domains specified above.
paths:
  article: 
    path: /article/22
    before_capture: 'javascript/config-phantom.js'
  # collection: /collection/28

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

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

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

# (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

verbose: true