PhantomCSSでViewの回帰テスト

brew update
brew install phantomjs
brew install casperjs --devel

CasperJS 1.0.x does not support PhantomJS version >= 1.9

git clone [email protected]:Huddle/PhantomCSS.git

$ casperjs test demo/testsuite.js
Test file: demo/testsuite.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 screenshots will be compared to the original.
If they are different, PhantomCSS will report a failure.
WARN Looks like you didn't run any test.                                        

phantomcss.screenshot('#myModal', 'coffee machine dialog');

$ casperjs test demo/testsuite.js
Test file: demo/testsuite.js                                                    


PASS No changes found for screenshot ./screenshots/cappuccino success_2.png


PASS No changes found for screenshot ./screenshots/coffee machine close success_3.png


PASS No changes found for screenshot ./screenshots/coffee machine dialog_1.png


PASS No changes found for screenshot ./screenshots/open coffee machine button_0.png

PhantomCSS found 4 tests, None of them failed. Which is good right?

If you want to make them fail, go change some CSS - weirdo.
PASS 4 tests executed in 4.636s, 4 passed, 0 failed, 0 dubious, 0 skipped.      

            .mug {
-               font-size: 180px;
+               font-size: 150px;
                color: #666;
            }

$ casperjs test demo/testsuite.js
Test file: demo/testsuite.js                                                    


FAIL Visual change found for screenshot ./screenshots/cappuccino success_2.png (29.07% mismatch)
#    type: fail
#    file: demo/testsuite.js
#    subject: false


PASS No changes found for screenshot ./screenshots/coffee machine close success_3.png


FAIL Visual change found for screenshot ./screenshots/coffee machine dialog_1.png (20.67% mismatch)
#    type: fail
#    file: demo/testsuite.js
#    subject: false


PASS No changes found for screenshot ./screenshots/open coffee machine button_0.png

PhantomCSS found 4 tests, 2 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 4 tests executed in 6.553s, 2 passed, 2 failed, 0 dubious, 0 skipped.      

Details for the 2 failed tests:

In demo/testsuite.js
  Untitled suite in demo/testsuite.js
    fail: Visual change found for screenshot ./screenshots/cappuccino success_2.png (29.07% mismatch)
In demo/testsuite.js
  Untitled suite in demo/testsuite.js
    fail: Visual change found for screenshot ./screenshots/coffee machine dialog_1.png (20.67% mismatch)