CSS3 is the ignition and responsive design will become the driving force of developments in visual and CSS testing. PhantomCSS is one of many new tools to support this paradigm shift in UI testing.

PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then generates image diffs to help you find the cause.

I have tested PhantomCSS directly in giuseppecilia.com and I have achived good results.

After the download of PhantomCSS, I have created my giuseppecilia.js in demo folder:

var phantomcss = require('./../phantomcss.js');
phantomcss.init();

casper.start( 'http://www.giuseppecilia.com' );
casper.viewport(1024, 768);

casper.then( function(){
  //takes images of first period of first article
  phantomcss.screenshot('.entry-content>p:first-child', 'first period of first article');
});

casper.then( function now_check_the_screenshots(){
  phantomcss.compareAll(); //compare screenshots
});

casper.then( function end_it(){
  casper.test.done();
});

casper.run(function(){
  console.log('\nTHE END.');
  phantom.exit(phantomcss.getExitStatus());
});

From the command line/terminal run:
casperjs demo/giuseppecilia.js (on Windows)
casperjs test demo/giuseppecilia.js (on Mac OSX)

FIRST LAUNCH
…in PhantomCSS>casperjs demo\giuseppecilia.js
Test file: demo\giuseppecilia.js

Must be your first time?
Some screenshots have been generated in the directory .\screenshots
This is your ‘baseline’, check the images manually. If they’re wrong, delete the images.
The next time you run these tests, new screenshots will be taken.
These screens hots will be compared to the original.
If they are different, PhantomCSS will report a failure.
WARN Looks like you didn’t run any test.

first period of first article_0.diff

SECOND LAUNCH without modify/bug
casperjs demo\giuseppecilia.js
Test file: demo\giuseppecilia.js

PASS No changes found for screenshot .\screenshots\first period of first article_0.png

PhantomCSS found 1 tests, None of them failed. Which is good right?
If you want to make them fail, go change some CSS – weirdo.
PASS 1 test executed in 12.415s, 1 passed, 0 failed, 0 dubious, 0 skipped.

THIRD LAUNCH – AFTER A MODIFY – STRONG (BUG)
casperjs demo\giuseppecilia.js
Test file: demo\giuseppecilia.js

FAIL Visual change found for screenshot .\screenshots\first period of first article_0.png (6.11% mismatch)
# type: fail
# file: demo\giuseppecilia.js
# subject: false

PhantomCSS found 1 tests, 1 of them failed.
PhantomCSS has created some images that try to show the difference (in the directory .\failures).
Fuchsia colored pixels indicate a difference betwen the new and old screenshots.
FAIL 1 test executed in 13.554s, 0 passed, 1 failed, 0 dubious, 0 skipped.

Details for the 1 failed test:
In demo\giuseppecilia.js
Untitled suite in demo\giuseppecilia.js
fail: Visual change found for screenshot .\screenshots\first period of first article_0.png (6.11% mismatch)

first period of first article_0

This is the “fail” image that permit to individuate the difference/the bug:
first period of first article_0.fail

FOURTHY TIME – AFTER FIX
casperjs demo\giuseppecilia.js
Test file: demo\giuseppecilia.js

PASS No changes found for screenshot .\screenshots\first period of first article_0.png

PhantomCSS found 1 tests, None of them failed. Which is good right?
If you want to make them fail, go change some CSS – weirdo.
PASS 1 test executed in 12.025s, 1 passed, 0 failed, 0 dubious, 0 skipped.

Best practices with PhantomCSS:

  • Name your screenshots!
  • CSS3 selectors for testing
  • PhantomCSS should not be used to replace functional tests
  • Don’t try to test all the visuals
  • Full page screenshots are a bad idea
  • Scaling visual regression testing within a large team
  • Scaling visual regression testing with Git
share me!:))Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page