PhantomJS not properly rendering websites which use Flexbox

[Sabbi0612]

Hi,
I've tried Implementing Wraith in the project I'm working on and I'm using a System with Windows 8.1 Pro.

Description of Issue :
Wraith Version - 3.2.1
Ruby Version - ruby 2.2.5p319
ImageMagick Version - 7.0.2-7 Q16 x64
PhantomJS Version - 1.9.7
CasperJS Version - 1.1.2

---

On running the command "wraith capture [filename.yaml]" and after its successful execution when I Observe the screenshots in the "Shots" folder the Screenshots do not contain the JS and CSS elements which makes it look like as if the the Site is broken. The Icons, the Spacing between elements and other elements all are just missing from the Screenshots .The Structure of the site breaks as the images are shifted from their place.

I've tried changing the userAgent and the other settings using a CasperJS script in the before_capture hook as mentioned below. This was done just to check if it was due to the Casper JS Webkit.

I Just want the screenshots to look like as the site looks actually.

Issue checklist:

• [ Y ] I have validated my config file against YAML Validator to make sure it is valid YAML.
• [ Y ] I have run the command in verbose mode (by adding verbose: true to my config) and pasted the output below:

- [ Y ] I have run the command using Phantom as well but still the result was same.

• [ Y ] I have pasted the contents of my config file below:

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

# (required) The paths to capture. All paths should exist for both of the domains specified above.
paths:
  Home:     /

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

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

# (required) The directory that your 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

**The browser--casper.js has been pasted below** - 

module.exports = function (casper, ready) {
casper.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240";
casper.options.pageSettings.javascriptEnabled = true;
casper.options.pageSettings.loadImages = true;
casper.options.pageSettings.loadPlugins = true;
casper.options.pageSettings.localToRemoteUrlAccessEnabled = true;
casper.thenOpen(casper.page.url);
casper.wait(10000, ready);
}

[Sabbi0612]

To check if this is something due to my Windows System, I installed a New Ubuntu (Linux) system 14.04 LTS as a VM in my Windows Machine only. The Installation on Ubuntu was a success but the screenshots observed for the above mentioned .yaml file were still same and didn't loaded the page properly even after imparting enough page load time. The Screens shots display the pages that seem visually broken..

[ChrisBAshton]

PhantomJS 1.9.7 isn't very modern - it doesn't even let you use JavaScript's .bind method - so if your site is quite modern CSS/JS-wise (e.g. using Flexbox, canvas, web components, etc) then Phantom may not render it correctly.

You may want to try upgrading to Phantom 2.1.

Also, it would be helpful to paste the entire config - for instance, if you've set your domains to be https rather than http then that could also cause problems.

Other than that, I can confirm that your config seems ok from here, so there's nothing obvious to explain why your pages might not be rendering properly.

[Sabbi0612]

##############################################################
##############################################################
# 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 churchfinder.yaml`
#
##############################################################
##############################################################

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

# (required) The domains to take screenshots of.
domains:
  current:  "http://www.churchfinder.com"
  new:      "This can't be shared due to privacy policy of the company"

# (required) The paths to capture. All paths should exist for both of the domains specified above.
paths:
  home:     /

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

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

# (required) The directory that your 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

AND THE DISABLE JAVASCRIPT FILE USED IN THE BEFORE CAPTURE HOOK IS AS FOLLOWS -

module.exports = function (phantom, ready) {
    // disable JavaScript
    phantom.settings.javascriptEnabled = true;

    // reload the page without JS enabled
    phantom.open(phantom.url, function () {
        setTimeout(ready, 5000);
    });
}

Comment :
The site is of http domain only so i think that shouldn't be a problem.
As per your comment @ChrisBAshton I updated the Version of PhantomJS to 2.1.1 as it shows on Terminal (Ubuntu) and CMD (Windows) but the problem is still the same. For all the Resolutions provided the screenshots are visually broken. I'm attaching the screenshot for reference , Please have a look.
You can compare it with the URL written in the Yaml file.

I Appreciate your help on this.
Really eager to implement wraith successfully for my project.

Thanks for the efforts.

[ChrisBAshton]

Hi @Sabbi0612 - I've just tried your config locally and I get the same issue, the screenshots look weird. I'm using a modern version of Phantom 2.1.1.

You site uses Flexbox (I had a quick look at your site and there is a CSS rule .two-col-block__inner { flex-basis: 49%; }).

After digging into this in a bit more detail, it appears that there is very limited support for Flexbox even in Phantom 2+. See this discussion.

The good news is that they reckon Flexbox will be fully supported in the next major version of PhantomJS.

Until then, there isn't really a fix for this. You could try using SlimerJS instead, which is a different rendering engine, but this isn't supported by Wraith out of the box (see #364) so you'd have to write your own snap file, etc.

[seanw]

@Sabbi0612 Trying PhantomJS 2.5 beta as it appears to have much improved flexbox support.

[alexharris]

@seanw Any luck with 2.5? I installed phantomjs with homebrew, which only provides up to 2.1.1, but could try to manually switch to 2.5 if flexbox support is there

[iget-master]

There is a release date for 2.5? Flex box feature is really f*cking me :(

[hey-ape]

This fix worked for us: ariya/phantomjs#14365, as referenced originally by @ChrisBAshton

It's a PhantomJS issue. Try putting prefixes in your css for Safari 4!

[automagisch]

Turns out that the Safari fix doesn't solve everything.. A lot, but not everything.

To get around, I created a little hack I call 'the casper tweak'. The idea is to have casper set a 'casper-env' class to the body of the headless page (so it will not interfere with the application when displayed through Chrome), and catch up on it in your css to disable flex properties in the application casper is looking at.

I am aware that this is far from optimal and goes against every design principle of regressive testing, but in my case the flexbox property was not subjective to the test, but nonetheless the bug rendered the page useless, so I came up with this gist to get around that:

https://gist.github.com/automagisch/7ad2be5ee75b27e10111971b6394918b

It allows for checking if the env class had been set, and respond in your (s)css to that class change, so I would set a 'display: flex' to 'display: block' for Casper, so I can still test my functionalities :).

• definitly not a fix, but untill phantomjs2.5 is released this works pretty well (at least for me - as a last resort :p).