Zombiecss

This is a lot like phantomcss and backstop.js but better

It takes snapshots and comapres dom elements

It does not come with any testing tools so you can integrate it into any of your favorite tools

You will need to install zombie.js in order for this to work

Usage

npm i --save zombiecss

Screenshot

zombie.js is missing the ability to create screenshots but with this tool it isn't

How to use

var Browser = require('zombie')
var zombie = new Browser()

var zombiecss = require('zombiecss')

var yourUrl = 'www.google.com'

zombie
    .visit(yourUrl)
    .then(function() {
        zombiecss.screenshot(zombie, {
            baseDir: './snapshots/',
            actualFile: 'goolge_sample',
            selector: '.logo-subtext'
        })
    })

It will save to a folder called snapshots (must exist).

It will then save a file called 'google_sample.png'

Unlike other tools there is an option to use SVG (see what I did there? if not look at the code, it is ingenious) just att the option toSvg: true to your object your pass to zombiecss.screenshot

have a look at sample_screenshot.js for a working example

Compare

You can compare an old dom element with a new one. Useful for screenshot testing (aka css testing??? doubt it)

var fs = require('fs')

var Browser = require('zombie')
var zombie = new Browser()

var zombiecss = require('zombiecss')

var yourUrl = 'www.google.com'

zombie
    .visit(yourUrl)
    .then(function() {
        zombiecss.compare(zombie, {
            baseDir: './snapshots',
            expectedFile: 'goolge_sample',
            actualFile: 'goolge_sample_actual',
            diffFile: 'goolge_sample_diff',
            selector: '.logo-subtext'
        })
    })

Current limitations

• If any of your files do not exist then it will not create a diff
• These files must be png

And that is currently it things to look out for (this has only been in development for the past couple of days!)

Upcoming and Desired

• I would want snapshot to become a part of zombie.js and will raise it with them. No idea if it will but it would be awesome if it was
• the compare will create a report (not one using a server like stupid backstop.js)
• get more function pairty with phantomcss (though why you want all those stupid functions I will never know)
• create a zombie.js assertion
• grunt and gulp tasks because everyone seems to like those (don't know why they slow development down no end, especially when you can create a tiny (yes there are about a million libraries for npm you don't need to go bananas with creating a full on script, just call someone else's) script and then run npm dev run or npm test or something similar... ok rant over)

Contributuions

I think that is it. There is kind of a test but it is just to run node ./sample/sample_functionName.js

If you find bugs raise an issue, if you want to add funtionality or features raise an issue or do a PR As long as you write a script which gives you some infomation

Things to bear in mind. I love offline coding and server side rendering (they are pretty much the same thing), so things like generating a report is done using mustahce and I do enjoy live reload but I don't think it should be apart of this library, it should be apart of someone else's stuff instead

I am pretty trigger happy when accepting PRs and I don't care about squelching or anything like that or if all your commit messages are like "ummm... that happened???" because I will ignore them, I prefer working like, "if the code is broken fix it, I don't need to see how it go broken"