ReactJS elements are not captured

[James]

I am unable to capture elements that are part of a React App. Any elements inside the
<div data-reactroot ........> elements are blank on capture. As an example I've added a config for a site I know will display this issue.

---

wraith info

DEBUG: #################################################
DEBUG:   Command run:        history configs/test.yaml
DEBUG:   Wraith version:     4.0.1
DEBUG:   Ruby version:       ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-darwin15]
DEBUG:   ImageMagick:        Version: ImageMagick 6.9.6-6 Q16 x86_64 2016-11-25 http://www.imagemagick.org
DEBUG:   PhantomJS version:  2.1.1
DEBUG:   CasperJS version:   1.1.4
DEBUG: #################################################

verbose mode output below:

Config validated. No serious issues found.
Creating Folders
SAVING IMAGES
DEBUG: casperjs --ignore-ssl-errors=true --ssl-protocol=tlsv1 '/Users/jamesburns/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/wraith-4.0.1/lib/wraith/javascript/casper.js' 'https://n1k0.github.io/tinysynth//' '768,1024,1920' 'shots/timy/MULTI_casperjs_english.png' 'body' 'false' '/Users/jamesburns/Development/workspace/wraith/javascript/wait--casper.js'
Snapping https://n1k0.github.io/tinysynth// at: 768x1500

Snapping https://n1k0.github.io/tinysynth// at: 1024x1500

Snapping https://n1k0.github.io/tinysynth// at: 1920x1500

config file below:

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

# (required) The domain to take screenshots of.
domains:
  english: 'https://n1k0.github.io/tinysynth/'

# (required) The paths to capture. This particular config is using casperjs, so we can take screenshots of selectors rather than the entire page.
paths:
  timy:
    path: /
    before_capture: 'javascript/wait--casper.js'


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

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

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

mode: diffs_first

verbose: true

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

[Chris Ashton]

Phantom is not very good at rendering anything too "complex" or modern. If Phantom can't render it, Wraith can't screenshot it. (Similar issue: #462)

For example, looking at this in IE9, I can see a console error saying web audio API is unsupported.

To know exactly what's failing for your project, try implementing a progressive enhancement approach so that you deliver some decent core content by default, and then replace it with the web audio stuff if the browser supports those features. (If the screenshot takes screenshots of your core content rather than the full fat experience, you know Phantom was not able to render the full experience)

This is a Phantom issue rather than a Wraith issue.

[James]

Thanks for having a look. I can capture the core content with no problem. Unfortunately, we are progressively moving many of our pages to react. So I guess we are at the mercy of Phantom. Thanks once more for looking.