CODEWITHSUNDEEP
javascriptcsstestingphantomcssresemblejs
vitto
vitto

Reputation: 19496

Testing phantomCSS won't find ResembleJs container

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?

Upvotes: 2

Views: 1232

Answers (4)

Hassan Muneer
Hassan Muneer

Reputation: 41

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.

Upvotes: 1

sandy
sandy

Reputation: 63

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.

Upvotes: 1

Adam Hutton
Adam Hutton

Reputation: 21

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.)

Upvotes: 2

vitto
vitto

Reputation: 19496

Using absolute paths solved my problem:

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

Upvotes: 1

Related Questions