From 85b484a1dad6b7eab9e80498709bbacc4066181f Mon Sep 17 00:00:00 2001 From: "james.cryer" Date: Wed, 2 Mar 2016 16:32:20 +0000 Subject: [PATCH] PhantomJS 2 notes --- LICENSE | 2 +- README.md | 22 +++++++++++++++------- phantomcss.js | 2 +- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/LICENSE b/LICENSE index b265c8a..88539e7 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -The MIT License (MIT) Copyright © 2013 Huddle +The MIT License (MIT) Copyright © 2013-2016 Huddle Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in diff --git a/README.md b/README.md index 8d84753..248a9a9 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ PhantomCSS ========== -**CSS regression testing**. A [CasperJS](http://github.com/n1k0/casperjs) module for automating visual regression testing with [PhantomJS](http://github.com/ariya/phantomjs/) or [SlimerJS](http://slimerjs.org/) and [Resemble.js](http://huddle.github.com/Resemble.js/). For testing Web apps, live style guides and responsive layouts. Read more on Huddle's Engineering blog: [CSS Regression Testing](http://tldr.huddle.com/blog/css-testing/). +**CSS regression testing**. A [CasperJS](http://github.com/n1k0/casperjs) module for automating visual regression testing with [PhantomJS 2](http://github.com/ariya/phantomjs/) or [SlimerJS](http://slimerjs.org/) and [Resemble.js](http://huddle.github.com/Resemble.js/). For testing Web apps, live style guides and responsive layouts. Read more on Huddle's Engineering blog: [CSS Regression Testing](http://tldr.huddle.com/blog/css-testing/). ### What? @@ -37,6 +37,16 @@ or * `casperjs test demo/testsuite.js --verbose --log-level=debug` +### Warning + +This project is currently tracking the HEAD of the [CasperJS master branch](https://github.com/n1k0/casperjs) to enable [Phantomjs 2](http://phantomjs.org/) support. +If you are unable to lock down your dependency chain, or would rather use a more stable version of PhantomCSS, please see the [v0 branch](https://github.com/Huddle/PhantomCSS/tree/v0); + +### Updating from PhantomCSS v0 to v1 + +Rendering is quite different with PhantomJS 2, so when you update, old visual tests will start failing. +If you're tests are green and passing before updating, I would recommend rebasing the visual tests, i.e. delete them, and run the test suite to create a new baseline. + ### Download PhantomCSS can be downloaded in various ways: @@ -45,9 +55,11 @@ PhantomCSS can be downloaded in various ways: * `bower install phantomcss` * `git clone git://github.com/Huddle/PhantomCSS.git` +If you are not installing via NPM, you will need to run `npm install` in the PhantomCSS root folder. + ### Getting started, try the demo -* Mac OSX users should first [install CasperJS 1.1-beta](http://docs.casperjs.org/en/latest/installation.html), easiest with Homebrew. For convenience I've included CasperJS.bat for Windows users. +* For convenience I've included CasperJS.bat for Windows users. If you are not a Windows user, you will have to install the latest version of * Download or clone this repo and run `casperjs test demo/testsuite.js` in command/terminal from the PhantomCSS folder. PhantomJS is the only binary dependency - this should just work * Find the screenshot folder and have a look at the (baseline) images * Run the tests again with `casperjs test demo/testsuite.js`. New screenshots will be created to compare against the baseline images. These new images can be ignored, they will be replaced every test run. @@ -58,14 +70,10 @@ PhantomCSS can be downloaded in various ways: ### SlimerJS -SlimerJS uses the Gecko browser engine rather than Webkit. It currently has better support for Webfonts and can load Flash content if the plugin is installed. If this is of interest to you, please follow the [download and install](http://slimerjs.org/download.html) instructions and ensure SlimerJS is installed globally. +SlimerJS uses the Gecko browser engine rather than Webkit. This has some advantages over PhantomJS, such as a non-headless view. If this is of interest to you, please follow the [download and install](http://slimerjs.org/download.html) instructions and ensure SlimerJS is installed globally. * `casperjs test demo/testsuite.js --engine=slimerjs` -### PhantomJS 2 - -The latest and greatest version of PhantomJS is not currently supported, as soon as CasperJS has confirmed full support we can look to update PhantomCSS. If (in the future) support has become viable, and you're eager to upgrade, please create and Issue and/or Pull Request. - ### Options and setup If you are using SlimerJS, you will need to specify absolute paths (see 'demo'). diff --git a/phantomcss.js b/phantomcss.js index c8b3514..b7921f1 100755 --- a/phantomcss.js +++ b/phantomcss.js @@ -1,5 +1,5 @@ /* -James Cryer / Huddle / 2015 +James Cryer / Huddle / 2016 https://github.com/Huddle/PhantomCSS http://tldr.huddle.com/blog/css-testing/ */