Testing phantomCSS won't find ResembleJs container

Question

I'm trying to add visual comparison tests to my layouts but it seems I've not configured my testing environment correctly.

I'm using:

This is my test JS file:

var url, screenshotRoot, modules, phantomCSS, page;

url             = 'http://website.local';
screenshotRoot  = 'tests/screenshots';
modules         = '../node_modules';
phantomCSS      = require(modules + '/phantomcss/phantomcss.js');
page            = { width: 1024, height: 768 };

phantomCSS.init({
    screenshotRoot: screenshotRoot,
    failedComparisonsRoot: screenshotRoot + '/failures',
    libraryRoot: modules + '/phantomcss',
});

casper
.start(url)
.then(function() {
    phantomCSS.screenshot("body", "elements-cheatsheet");
})
.then(function() {
    phantomCSS.compareAll();
})
.run(function() {
    phantom.exit(phantomCSS.getExitStatus());
});

casper.viewport(page.width, page.height);

When I run casperjs test tests/layout.js the test starts, creates the screenshot and throws an error:

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

I've checked the location of resemblejscontainer.html file and it's exactly in the location listed in the thrown error.

Where I'm wrong?

score 2 · Answer 1 · answered Jan 15 '15 at 21:58

I assume you wish to be able to change between node_modules and, say, lib or bower_components?

The following should also work:

modules = 'node_modules';
phantomCSS = require('./../' + modules + '/phantomcss/phantomcss.js');
…
phantomCSS.init({
    …
    libraryRoot: './' + modules + '/phantomcss'
});

(This is based on a recipe from PhantomJS Cookbook.)

score 1 · Answer 2 · answered Mar 18 '14 at 10:05

1

Using absolute paths solved my problem:

modules = '/Users/username/path/node_modules';

answered Mar 18 '14 at 10:05

vitto

19,094
31
91
130

score 1 · Answer 3 · answered Mar 29 '16 at 19:58

1

I did 'sudo npm install resemblejs' within the PhantomCSS folder and it worked. Perhaps this work around is easier than changing the root folders or any other files for a novice user like me.

answered Mar 29 '16 at 19:58

sandy

63
5

score 1 · Answer 4 · answered May 30 '17 at 13:25

You need to pass phantomcss library path in phantomcss.init{} function

phantomcss.init( {
    rebase: casper.cli.get( "rebase" ),
    // SlimerJS needs explicit knowledge of this Casper, and lots of absolute paths
    casper: casper,
    libraryRoot: fs.absolute( fs.workingDirectory + '/node_modules/phantomcss' ),
    screenshotRoot: fs.absolute( fs.workingDirectory + '/screenshots' ),
    failedComparisonsRoot: fs.absolute( fs.workingDirectory + '/demo/failures' ),
    addLabelToFailedImage: false

This is from the phantomcss demo testcase.

Testing phantomCSS won't find ResembleJs container

4 Answers4