huddleeng/phantomcss

Visual/CSS regression testing with PhantomJS

phantomcss's Issues

TypeError when calling phantomcss.compareAll()

I'm developing a small proof-of-concept using PhantomCSS on a Windows machine and am getting errors when calling phantomcss.compareAll() when I've taken more than a single screenshot. I'm running with casperjs version 1.1.0-beta3.

testsuite.js

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

phantomcss.init({
  libraryRoot: './node_modules/phantomcss',
  screenshotRoot: './test/screenshots',
  failedComparisonsRoot: false
});

casper.test.begin('Prototype perceived difference setup', 0, function (test) {

  casper.start('http://localhost:8080');

  casper.then(function () {
    phantomcss.screenshot('h1', 'header');
    phantomcss.screenshot('p', 'body content');
  });

  casper.then(function () {
    phantomcss.compareAll();
  });

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

  casper.run(function  () {
    phantom.exit(phantomcss.getExitStatus());
  });
});

Calling this for the first time creates two screenshots as expected with no errors. Here is the log I get when I run the test suite a second time:

Test file: test/testsuite.js
# Prototype perceived difference setup
FAIL TypeError: '/\.diff\./' is not a function (evaluating 'casper.fill('form#im
age-diff', {

                'one': one,

                'two': two

        })')
#    type: uncaughtError
#    file: test/testsuite.js:236
#    error: '/\.diff\./' is not a function (evaluating 'casper.fill('form#image-
diff', {

                'one': one,

                'two': two

        })')
#           TypeError: '/\.diff\./' is not a function (evaluating 'casper.fill('
form#image-diff', {

#                       'one': one,

#                       'two': two

#               })')
#               at asyncCompare (C:/Users/Kriss/dev/myrtle/node_modules/phantomc
ss/phantomcss.js:236)
#               at C:/Users/Kriss/dev/myrtle/node_modules/phantomcss/phantomcss.
js:405
#               at runStep (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casp
erjs/modules/casper.js:1553)
#               at checkStep (C:/Users/Kriss/AppData/Roaming/npm/node_modules/ca
sperjs/modules/casper.js:399)
#    stack: not provided
FAIL TypeError: '/\.diff\./' is not a function (evaluating 'casper.fill('form#im
age-diff', {

                'one': one,

                'two': two

        })')
#    type: uncaughtError
#    file: test/testsuite.js:236
#    error: '/\.diff\./' is not a function (evaluating 'casper.fill('form#image-
diff', {

                'one': one,

                'two': two

        })')
#           TypeError: '/\.diff\./' is not a function (evaluating 'casper.fill('
form#image-diff', {

#                       'one': one,

#                       'two': two

#               })')
#               at asyncCompare (C:/Users/Kriss/dev/myrtle/node_modules/phantomc
ss/phantomcss.js:236)
#               at C:/Users/Kriss/dev/myrtle/node_modules/phantomcss/phantomcss.
js:405
#               at runStep (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casp
erjs/modules/casper.js:1553)
#               at checkStep (C:/Users/Kriss/AppData/Roaming/npm/node_modules/ca
sperjs/modules/casper.js:399)
#    stack: not provided
FAIL 2 tests executed in 1.851s, 0 passed, 2 failed, 0 dubious, 0 skipped.

Details for the 2 failed tests:

In test/testsuite.js:236
  Prototype perceived difference setup
    uncaughtError: TypeError: '/\.diff\./' is not a function (evaluating 'casper
.fill('form#image-diff', {

                'one': one,

                'two': two

        })')
In test/testsuite.js:236
  Prototype perceived difference setup
    uncaughtError: TypeError: '/\.diff\./' is not a function (evaluating 'casper
.fill('form#image-diff', {

                'one': one,

                'two': two

        })')

Done, without errors.

In an effort to determine whether this was something in my code that wasn't set up correctly, I cloned the PhantomCSS repository and ran the demo testsuite. Again, the first run was as expected, but the second run resulted in the following:

C:\Users\Kriss\dev\PhantomCSS [master]> casperjs test .\demo\testsuite.js
C:\Users\Kriss\dev\PhantomCSS [master]> Test file: .\demo\testsuite.js


New screenshot at .\screenshots\open coffee machine button_0.png


New screenshot at .\screenshots\coffee machine dialog_1.png


New screenshot at .\screenshots\cappuccino success_2.png


New screenshot at .\screenshots\coffee machine close success_3.png

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.

C:\Users\Kriss\dev\PhantomCSS [master +1 ~0 -0 !]> casperjs test .\demo\testsuit
e.js
C:\Users\Kriss\dev\PhantomCSS [master +1 ~0 -0 !]> Test file: .\demo\testsuite.j
s
FAIL TypeError: 'undefined' is not an object (evaluating 't.nodeName.toLowerCase
')
#    type: uncaughtError
#    file: .\demo\testsuite.js
#    error: {"message":"'undefined' is not an object (evaluating 't.nodeName.toL
owerCase')","line":4,"sourceId":83498024,"sourceURL":"http://code.jquery.com/jqu
ery-1.9.1.min.js","stack":"TypeError: 'undefined' is not an object (evaluating '
t.nodeName.toLowerCase')\n    at http://code.jquery.com/jquery-1.9.1.min.js:4\n
   at asyncCompare (C:/Users/Kriss/dev/PhantomCSS/phantomcss.js:236)\n    at C:/
Users/Kriss/dev/PhantomCSS/phantomcss.js:405\n    at runStep (C:/Users/Kriss/App
Data/Roaming/npm/node_modules/casperjs/modules/casper.js:1553)\n    at checkStep
 (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/casper.js:399
)","stackArray":[{"sourceURL":"http://code.jquery.com/jquery-1.9.1.min.js","line
":4},{"function":"asyncCompare","sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phant
omcss.js","line":236},{"sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phantomcss.js"
,"line":405},{"function":"runStep","sourceURL":"C:/Users/Kriss/AppData/Roaming/n
pm/node_modules/casperjs/modules/casper.js","line":1553},{"function":"checkStep"
,"sourceURL":"C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/c
asper.js","line":399}]}
#    stack: not provided
FAIL TypeError: 'undefined' is not an object (evaluating 't.nodeName.toLowerCase
')
#    type: uncaughtError
#    file: .\demo\testsuite.js
#    error: {"message":"'undefined' is not an object (evaluating 't.nodeName.toL
owerCase')","line":4,"sourceId":83498024,"sourceURL":"http://code.jquery.com/jqu
ery-1.9.1.min.js","stack":"TypeError: 'undefined' is not an object (evaluating '
t.nodeName.toLowerCase')\n    at http://code.jquery.com/jquery-1.9.1.min.js:4\n
   at asyncCompare (C:/Users/Kriss/dev/PhantomCSS/phantomcss.js:236)\n    at C:/
Users/Kriss/dev/PhantomCSS/phantomcss.js:405\n    at runStep (C:/Users/Kriss/App
Data/Roaming/npm/node_modules/casperjs/modules/casper.js:1553)\n    at checkStep
 (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/casper.js:399
)","stackArray":[{"sourceURL":"http://code.jquery.com/jquery-1.9.1.min.js","line
":4},{"function":"asyncCompare","sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phant
omcss.js","line":236},{"sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phantomcss.js"
,"line":405},{"function":"runStep","sourceURL":"C:/Users/Kriss/AppData/Roaming/n
pm/node_modules/casperjs/modules/casper.js","line":1553},{"function":"checkStep"
,"sourceURL":"C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/c
asper.js","line":399}]}
#    stack: not provided
FAIL TypeError: 'undefined' is not an object (evaluating 't.nodeName.toLowerCase
')
#    type: uncaughtError
#    file: .\demo\testsuite.js
#    error: {"message":"'undefined' is not an object (evaluating 't.nodeName.toL
owerCase')","line":4,"sourceId":83498024,"sourceURL":"http://code.jquery.com/jqu
ery-1.9.1.min.js","stack":"TypeError: 'undefined' is not an object (evaluating '
t.nodeName.toLowerCase')\n    at http://code.jquery.com/jquery-1.9.1.min.js:4\n
   at asyncCompare (C:/Users/Kriss/dev/PhantomCSS/phantomcss.js:236)\n    at C:/
Users/Kriss/dev/PhantomCSS/phantomcss.js:405\n    at runStep (C:/Users/Kriss/App
Data/Roaming/npm/node_modules/casperjs/modules/casper.js:1553)\n    at checkStep
 (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/casper.js:399
)","stackArray":[{"sourceURL":"http://code.jquery.com/jquery-1.9.1.min.js","line
":4},{"function":"asyncCompare","sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phant
omcss.js","line":236},{"sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phantomcss.js"
,"line":405},{"function":"runStep","sourceURL":"C:/Users/Kriss/AppData/Roaming/n
pm/node_modules/casperjs/modules/casper.js","line":1553},{"function":"checkStep"
,"sourceURL":"C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/c
asper.js","line":399}]}
#    stack: not provided
FAIL TypeError: 'undefined' is not an object (evaluating 't.nodeName.toLowerCase
')
#    type: uncaughtError
#    file: .\demo\testsuite.js
#    error: {"message":"'undefined' is not an object (evaluating 't.nodeName.toL
owerCase')","line":4,"sourceId":83498024,"sourceURL":"http://code.jquery.com/jqu
ery-1.9.1.min.js","stack":"TypeError: 'undefined' is not an object (evaluating '
t.nodeName.toLowerCase')\n    at http://code.jquery.com/jquery-1.9.1.min.js:4\n
   at asyncCompare (C:/Users/Kriss/dev/PhantomCSS/phantomcss.js:236)\n    at C:/
Users/Kriss/dev/PhantomCSS/phantomcss.js:405\n    at runStep (C:/Users/Kriss/App
Data/Roaming/npm/node_modules/casperjs/modules/casper.js:1553)\n    at checkStep
 (C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/casper.js:399
)","stackArray":[{"sourceURL":"http://code.jquery.com/jquery-1.9.1.min.js","line
":4},{"function":"asyncCompare","sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phant
omcss.js","line":236},{"sourceURL":"C:/Users/Kriss/dev/PhantomCSS/phantomcss.js"
,"line":405},{"function":"runStep","sourceURL":"C:/Users/Kriss/AppData/Roaming/n
pm/node_modules/casperjs/modules/casper.js","line":1553},{"function":"checkStep"
,"sourceURL":"C:/Users/Kriss/AppData/Roaming/npm/node_modules/casperjs/modules/c
asper.js","line":399}]}
#    stack: not provided

C:\Users\Kriss\dev\PhantomCSS [master +1 ~0 -0 !]> FAIL 4 tests executed in 2.70
1s, 0 passed, 4 failed, 0 dubious, 0 skipped.

Details for the 4 failed tests:

In .\demo\testsuite.js
  Untitled suite in .\demo\testsuite.js
    uncaughtError: TypeError: 'undefined' is not an object (evaluating 't.nodeNa
me.toLowerCase')
In .\demo\testsuite.js
  Untitled suite in .\demo\testsuite.js
    uncaughtError: TypeError: 'undefined' is not an object (evaluating 't.nodeNa
me.toLowerCase')
In .\demo\testsuite.js
  Untitled suite in .\demo\testsuite.js
    uncaughtError: TypeError: 'undefined' is not an object (evaluating 't.nodeNa
me.toLowerCase')
In .\demo\testsuite.js
  Untitled suite in .\demo\testsuite.js
    uncaughtError: TypeError: 'undefined' is not an object (evaluating 't.nodeNa
me.toLowerCase')

Any ideas on where I could be going wrong? Is Windows support something that is expected to work? I normally develop under OS X (where I've had no issues) but this project needs to work on both platforms ideally.

Ignore whitespace/size differences?

Hi,
Just getting going with PhantomCSS, and liking it very much. One issue I am getting is where a selector has changed size (for example, something outside of it is holding a longer string). This change I do not want to capture; is there a way to get phantomCSS to ignore any differences between images that are just whitespace? Or to get it to ignore any additional size on the second image being compared to the baseline?
thanks!

screenshot() assuming jQuery $ to hide elements

If your page isn't using jQuery without noConflict, this will not work

(in my case, we're using MooTools)

I'll provide a pull request with a plain old JavaScript fix using querySelectorAll

        if(hideSelector || _hideElements){
            casper.evaluate(function(s1, s2){
                if(s1){
                    $(s1).css('visibility', 'hidden');
                }
                $(s2).css('visibility', 'hidden');
            }, {
                s1: _hideElements,
                s2: hideSelector
            });
        }

Requesting a screenshot on an invisible item

As far as I can tell - it's defaulting to taking a full-viewport screenshot when the selector is invisible. Is this happening? If so - perhaps a better response would be an empty PNG file.

Detect optical illusions

I am not sure if this fits into the scope of PhantomCSS or whether it is time to think about it yet.

It would be greate to check UI screenshots against optical illusions.
For example Trello has this annoying Hermann-grid optical illusion when seeing "My Boards" on larger screens (see screenshot).
Why I think it is better to have such testing at stage of implemented software rathen than at stage of implemented design pictures? Because optical illusions may appear at screen resolutions that were not covered by design pictures, and little changes may be applied to already implemented software that may cause optical illusions.

0.08% unexplained diff only in travis-ci

Before I'll ask I want to say this is an awesome project, changing the way functional testing works.

The problem:

When I run the test in my project locally it passes. but when Travis-ci runs it it fails with a 0.08% diff. I checked for local vs travis casperjs and phantomjs versions and they look the same to me.

what can be the explanation?

Also, can I set a fail threshold. telling it not to fail on less, say, 0.1% difference? (A command line option maybe/)

Visual Regression Testing

You have defined PhantomCSS a tool for visual regression testing. Can you elaborate on the terminology you have chosen because I cannot find any through definition about what it is. I know what it does, I am just curious if your buzzword is actually scientifically strong enough or not.

Any feedbacks or comments are mostly welcomed.

CasperJS version

Hey,

Currently you are using 1.0.2 but I tried manually upgrading to 1.1.0 without any luck. Everything works up until the image comparison takes place.

Any possibility that this upgrade will occur?

Thanks!

exe and linux bianries together?

Hi,

I've noticed that you have a phantomjs.exe in the root of your project, but capsper has a bin directory with (presumably) linux binaries?

Is this repository looking to provide a bundle of phantom, casper and ressemble so users don't have to install them separately?

Also, is there a dependency on nodejs?

I'm sorry for asking these dumb questions, but the wiki link does not seem to be working..

How are fail images created because ours aren't created as expected

I'm working with an implementation of PhantomCSS which has a custom test runner to interface between Phantom & our source tree. The app being tested is a django app running a local server all managed & ran through Apache ANT.

So instead of reading the files directly, we're calling URLs and having Phantom run that way using our local server.

There doesn't seem to be a problem with our baseline images, and the creation of the diff images, but when fail images are created they only capture the img in the header of our pages :(

I assume the issue is with the following line which just finds that img on the page, rather than what is meant to happen usually with Phantom...
casper.captureSelector(failFile, 'img');

How does the creation of the .fail.png work?

If I change the phantom source to..
casper.captureSelector(failFile, 'body');

The fail image captures what I would expect to see, but above the bar with the file name, it's captured the screen ('body') of our app also. I'm not sure if that helps.

Misaligned checkboxes & radio buttons on OSX

We run Phantom across a suite of XP, Centos and OSX (10.6.8), and Windows & Linux are as you would expect. OSX however renders radio buttons and check boxes away from their corresponding labels, significantly lower in the page.

Is this a bug in PhantomJS or is there something else I've missed here that causes this or may prove a way to improve/fix the issue?

Inconsistency in failures - whitespace or elements outside the selector

I'm testing an app with a familiar layout, header at the top, content underneath it.

Generally the screenshot selector is on the content and often the pages can be quite long (1,103px × 3,478px). I am noticing that there is often a diff of just a few pixels causing failures where there isn't actually any layout change, but extra space above the element has been captured in the screenshot forcing a slight difference. Sometimes there is even significant amounts of our header captured also.

Has anybody else encountered this type of thing? I'm trying to figure out a way to gain greater consistency. Perhaps I need to look at capturing smaller sections of the screen? This just feels like it invalidates a layout test through if you want to test that the whole page is correctly displayed you don't want it split in to pieces.

Any suggestions would be appreciated :)

Unable to run demo on OS X

Hi. I'm intrigued by your project, but I'm unable to run the demo on my Mac.

I've opened the binary file, and added the line "phantomjs demo/testsuite.js" as suggested in the demo, however, this causes the error message "parse error". Where am I going wrong?

*I realise this isn't a issue per se, but I don't know where else to post this.

some color diffs do not trigger failures

We are targeting a heading for one of our screenshots. When we change the color of the heading from red to #686868, the tests still pass. Is this expected? How does the library account for color?

We're using the library via grunt-phantomcss, which looks like it has the default resemble.js setting (ignoreColors: false).

casper.start( 'http://localhost:8000/all.html' );
casper.viewport(1024, 768);

casper.then(function(){
  phantomcss.screenshot('#responsive_images', 'responsive images section');
});

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

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

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

Can't fail test manually

I have a part of code that needs to verify an alert box. But since phantomjs is headless testing, window doesn't actually exist, the only way for me to verify an alert box is through the remote.alert event handling in Casperjs, so I needed to verify the alert box's message with an assert if possible.

I tried to do

casper.start();
casper.then(function(){
casper.test.fail("fail");
})

But nothing happens. I also tried to do casper.test.assertMatch but that doesn't work too. Other casper functions like casper.echo works. Is Phantomcss overriding the status output of the test?

No easy way to pass in target url

Is there a way to pass in a target url the tests?

For an automation pipeline this is useful since the baseline image is the same but the environments are different.

Use PerceptualDiff to get the diff between images

According to the documentation, the actual pixel-based diff from Resemble.js seems to have some difficulties when the variation is very small (like antialiasing).

From http://pdiff.sourceforge.net/:
"PerceptualDiff is an image comparison utility that makes use of a computational model of the human visual system to compare two images."

It may help remove false positive to use this tool (but maybe not easy to embed it inside PhantomCSS as it's not a JS lib).

Testing print styles

We've been having regressions around our print.css styles, since we don't see them often. Can PhantomCSS be used to test print styles?

Running PhantomCSS from a Makefile

Hi again,

Here's the current makefile i have for my project. Whilst the phantomCSS test works great when directly executed, my phantomCSS reports all sorts of directory problems when run from a makefile, in the parent folder. It's root seems to be base on where the makefile is, not the root of the phantomCSS install (where phantomCSS' dependencies are located.)

serve:
grunt &
pserve --reload development.ini &
casperjs test frontend-tests/404-test.js &
casperjs test frontend-tests/regression-test.js
.PHONY: serve

[PhantomCSS] Resemble.js not found: ./node_modules/resemblejs/resemble.js

[PhantomCSS] Can't find Resemble container. Perhaps the library root is mis configured. (./resemblejscontainer.html)

Do you think this is a problem related to phantomCSS, or perhaps make? My other casperjs test runs without any problems.

Let me know if I can provide any more details.
Thanks for your continued work!

Integrating the screenshots generated by Browserstack with PhantomCSS?

"I'm looking to integrate the screenshots generated by Browserstack with phantomCSS. For example, with Browserstack you can either request a full web page screenshot across a set of devices/browsers (Screenshots API), or a set of screenshots given a css selector (Automate API)

I'm wondering if you had any thoughts as to how I could go about integrating the two?"

-- Question was copied from email.

Question - JavaScript driven anchor doesn't update page when clicked

The page I'm am trying to test with PhantomCSS updates its content via AJAX on a mouse down event when certain links are clicked. I have a selector that gets the link I want to click on (I have verified this by using this.echo(this.getHTML(selector, true))), and I use this.click(selector) to click on it. Nothing changes when I take my next screenshot... so I tried to wait for 20 seconds to see if something happens, and still no change in the screenshot.

Is testing a single-page, ajax-driven application feasible using PhantomCSS? If so, where is a good place to look to debug why nothing is happening?

I haven't yet figured out how to get the console statements from the pages JavaScript to print out.

Multiple urls

Thanks for the great tool mate, more of a question then an issue.

I'm trying to test multiple urls but only the last url seems to be saving the screenshot. We cant click through because there is no link to the second page on the first one.

https://gist.github.com/chris-gunawardena/800da3d59fbce985a779

When failing, the fail screenshot is first image on page, not the difference between pages

I'm doing a big CSS overhaul and trying to make the new CSS look like the old CSS. PhantomCSS has been a great tool at helping me ensure parity, but the diff tool doesn't seem to be working correctly. According to the documentation, I believe PhantomCSS is supposed to highlight the parts of the page that differ in the failure screenshot.

The difference between the two attached images is about 1.4, and really hard to eyeball, but the fail screenshot just shows the first image on the page. I've tried removing the image, but it will just grab the next image instead. Is this a bug or am I doing something wrong?

I cloned the project from github yesterday.

BASELINE SCREENSHOT:

DIFF SCREENSHOT:

FAILURE SCREENSHOT:

ignoreAntialiasing causes bad quality image

Hello

PhantomCSS generates the following screenshot which is pretty in bad quality.

With ignoreAntialiasing :

I found out that removing the ignoreAntialiasing() call in phantomcss.js line 503 gives me a better quality image.

Without ignoreAntialiasing :

Can you provide options for us to enable or disable the ignoreAntialiasing option of ressemblejs ?

Best regards

Mismatch percentage should be configurable

https://github.com/Huddle/PhantomCSS/blob/master/phantomcss.js#L343 & https://github.com/Huddle/PhantomCSS/blob/master/phantomcss.js#L351

Mismatch percentage should be configurable, though I solved my problem by selecting a smaller test area.

For a small change like a button border radius, the mismatch can easily be less than 0.05% if the selection is not kept small. In the images below the selection is on the a single button and the % mismatch is only 0.08%, selecting 3 buttons dropped this below the 0.05% threshold and failed to find the regression.

Getting a TIMEOUT: ./screenshots/screenshot_1.png

Im getting this error after the second run of the test script, any ideas? in the screen shots folder I have screenshot_1.png and screenshot_1.diff.png

What am I doing wrong?

GitHub Releases

Could you please create new releases periodically as you bump the package.json version? As mentioned in #20 and #26, it would help other projects build strong dependencies on phantomcss using package managers like npm and bower. It would be great to download just a tarball instead of checking out the entire git repo.

Multi-Browser Support

Even though this project is named PhantomCSS, it would be great if you gave the option of testing in different browsers.

Because as we all know, Chrome != Firefox != IE != ...

Ignore certain elements

Hi

Is there a way to ignore certain elements when comparing?
We have facebook integrated all over the page and in some cases I can not take screenshots without facebook being on there. But sometimes loading facebook takes longer, so on some screenshots facebook is already loaded and on some others its still missing.

It would be nice if I could pass a selector like ".fb-like" that gets ignored.
I wouldn't mind if I would have to set that globally if no other way is possible.

Thanks

Fails with own instance of Casperjs Tester module

Here is those places:

function _onPass(test){
console.log('\n');
casper.test.pass('No changes found for screenshot ' + test.filename);
}
function _onFail(test){
console.log('\n');
casper.test.fail('Visual change found for screenshot ' + test.filename + ' (' + test.mismatch + '% mismatch)');
}
function _onTimeout(test){
console.log('\n');
casper.test.info('Could not complete image comparison for ' + test.filename);
}

actually casper.test can have any other key name for example casper.tester

Add project snippet to PhantomJS's "Related Projects" wiki page

https://github.com/ariya/phantomjs/wiki/Related-Projects

Thanks! :)

Update Resemble.js to latest version

We are searching for a way to use ignoreAntialiasingoption from Resemble.js in PhantomCSS, any suggestion?

Cheers
andy

Fail image is incorrect

I am not sure how and why this is occurring but I cannot seem to fathom the root of the problem.

Both the original image and the diff image are being saved correctly but the failed image that is generated is never correct (it is a print screen of the same page but some other place on the page).

The errors in the console successfully show that the image is different and shows the correct percentage changed. It's just the failed image saved is always incorrect.

ReferenceError: Can't find variable: Uint8ClampedArray

I know this issue is not supported by the current version of Phantomjs, however I compile the master phantomjs to the latest code in master branch and it works to generate the screenshot I need.

I would like to know how I can use phantomcss with my compiled phantomjs.

Any one can help me?

Demo file assumes local lib files

I have zero trouble getting your demo to work, but would rather like npm handle the dependancies. Problem is that I'm having trouble piecing together a test js file that actually works with npm controlled libs.

Is it possible to have a walkthrough/demo file, that works with basic NPM setup?

change path in PhantomCSS

Hey!

On my script and on demo too I have strange problem.

I get timeout when phantomcss try to compare img's

TIMEOUT: /screenshots\img_0.png

but the path should look like /screenshot/image_0.png how to change this?

fileName not being used in _fileNameGetter

'screenshot' function is calling '_fileNameGetter' with two parameters and it accepts 0, so '_root' is taken from global scope, but 'fileName' is always undefined.

This makes impossible to make a test with custom filename:

css.screenshot('body' , 1, '', 'main_page' );

Will create "screenshot_0.png" instead of "main_page_0.png".

Running tests from any folder

Hi,

I would like to be able to run the tests from anywhere in the console not only the cloned repo directory.

By example, my app is in: myAppFolder/app/

but tests are in myAppFolder/tests/css

I would like to be able to be in myAppFolder and run

phantomjs tests/css/testsuite.js

but I got a bunch of errors about not found modules at first time, I modified the variables and routes and I got it working like that but then phantomcss fails in compare screenshots (always getting timeout) I suspect is because It generates the screenshots in a folder by try to read them from other folder.

I do see the generated images in the specified folder but I always got a Timout and failed test.

Does anyone figured out to do this?

Cannot find module 'casper' when trying to run within Rails app

Hi,

I was trying to use this within my pre-existing Rails app and seem to keep getting a 'Cannot find module "casper"' error message.

I added your Git repo to the root of my app and changed the casperPath to point the CasperJs directory for phantom.casperPath, but no luck.

Let me know if you can help with this or if you can point me to any useful tutorials on using PhantomCSS in a Rails app.

Thanks

Ted

When run the testsuite again, there is no image to show the difference between new and old screenshots.

I'm trying the example. When I run the testsuite.js, it creates screenshot.0.png and screenshot.1.png. Then I updated css and run it again, I can see the command line output "1 of them failed", and it creates screenshot.0.diff.png and screenshot.1.diff.png, but they actually are new screenshots rather than the difference between the old and new screenshot.

When I run the testsuite again, can phantomcss generate new screenshot and its difference together? Then there will be screenshot.0.png, screenshot.0.diff.png and screenshot.0.compare.png, it would be more clear for me to check the difference.

minibugs bonus round

Hi guys, I am testing some rather large pages, and think perhaps im running out of memory or something, and the tests (12 pages) take around 20 minutes.

A number of little bugs include:

• the screenshots taken do not accurately depict my webpage (which uses angularjs and a bunch of other js libraries, maybe that's why) , with elements shifting of place, and a large margin down the whole right side.
• tests fail after running test twice in a row without any interstitial changes.
• "Could not complete image comparison for ./screenshots/screenshot_(X).png" also shows up for every single page tested.

Please let me know if im doing anything wrong, or if youd liek more details

Grid on failing images

Is there a way to disable the grid that is displayed on the failing images?

package.json should have "main" set to "phantomcss.js"

I can't require phantomcss as a nodejs module because of lack of "main" in package.json.

For now, I have to require("phantomcss/phantomcss") to require phantomcss.

Tool for recording test case?

Is there a tool for recording casper tests like "ressurrectio" that could record for phantomcss tests?

a question about image quality

Hi

very nice project. Over the last couple of weeks, i created a similar project with python/selenium/phantomjs (https://github.com/kinkerl/eukalypse) but i ran into some issues with phantomjs.

We use it as a standalone server in a production environment and once a week, phantomjs created images which where a bit "off". Everything was shifted some pixels in a direction. But only about once a week. I still have no idea why.

In the end, we still have to use selenium with Chrome because Firefox has (sometimes) problems with a deterministic antialising of webfonts and phantomjs is (sometimes) just off.

Did you get a similar problem?

Broken demo?

Not sure if this happening for anyone else but the demo is broken for me. I am running PhantomJS 1.9.7_1 and CasperJS 1.1 Beta 3.

The initial screen shot is generated without any styles and then fails by timing out from waiting for the modal to come up. I fixed it by downloading the CSS and JS dependencies and referencing them locally in coffeemachine.html

I'm not sure if this is a bug or if it's supposed to grab CSS and JS externally if they are referenced as such.

Broken lInk in the README.md

https://github.com/Huddle/PhantomFlow/blob/master/demo/runTests.js#L72 is 404

Don't recommend committing the baseline images in git

Commit/push these baseline images with your normal tests

This is going to result in a huge git repo, as git doesn't play well with binaries.

Does not run in debug mode because of missing casper module

I'm trying to run my testsuite.js in debug mode but am unable to do so because the casper module cannot be found. I presume this is because the debugger uses the context of the browser you run it in and so you lose access to the filesystem.

Steps to reproduce:

1. From the terminal, run phantomjs --remote-debugger-port=9000 testsuite.js
2. Navigate to http://localhost:9000 in a browser (I use Chrome)
3. In the console, type __run()

An exception is thrown with message: cannot find module 'casper'.

It would be great to know how you guys go about debugging against PhantomJS.

Ignore antialiasing gives false positive

Diffing two images with ignore antialiasing turned on gives me a false positive (the diff is blank). Images are below. Diffing them with ignore nothing or ignore colors produces the expected result.

Image 1

Image 2

Diff with ignore antialiasing

/cc @jamescryer