huddleeng / phantomcss Goto Github PK
View Code? Open in Web Editor NEWVisual/CSS regression testing with PhantomJS
License: MIT License
Visual/CSS regression testing with PhantomJS
License: MIT License
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.
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!
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
});
}
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.
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.
Before I'll ask I want to say this is an awesome project, changing the way functional testing works.
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/)
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.
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!
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..
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.
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?
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 :)
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.
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());
});
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?
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.
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).
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?
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!
"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.
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.
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
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.
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
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.
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?
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.
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 != ...
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
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
We are searching for a way to use ignoreAntialiasing
option from Resemble.js in PhantomCSS, any suggestion?
Cheers
andy
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.
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?
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?
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?
'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".
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?
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
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.
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:
Please let me know if im doing anything wrong, or if youd liek more details
Is there a way to disable the grid that is displayed on the failing images?
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.
Is there a tool for recording casper tests like "ressurrectio" that could record for phantomcss tests?
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?
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.
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.
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:
phantomjs --remote-debugger-port=9000 testsuite.js
http://localhost:9000
in a browser (I use Chrome)__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.
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.
/cc @jamescryer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.