@manychat/hermione-verify-screenshot

    0.0.19 • Public • Published

    hermione-verify-screenshot npm module

    Screenshot comparing plugin for Hermione

    Usage

    • Install npm package.
    • Add a plugin declaration to your hermione.conf.js:
    plugins : {
        'verify-screenshot' : {
            testBasePath : '/func-test/tests',
            referencePath : '/func-test/screenshots',
            unmatchedPath : '/func-test/screenshots-unmatched',
            diffPath : '/func-test/screenshots-diff'
        }
    }

    testBasePath is a path under which your test suites are stored.
    referencePath is a path under which reference screenshots would be stored.
    unmatchedPath is a path under which you will find image when screenshots do not match to reference.
    diffPath is a path under which you will find image diffs when screenshots do not match to reference.

    • Use verifyScreenshot command in your tests. It takes anything that should be shot (a x-y-width-height dimension set, a selector, or nothing meaning full window), and an arbitrary string (actually, a file name of screenshot).
    it('should look like we want it', function() {
        return this.browser
            .verifyScreenshot(50, 50, 100, 100, '100-by-100-square')
            .verifyScreenshot(50, 50, 100, 100, '100-by-100-square', {
                excludes: [{
                    selector: '.exclude-node'
                }]
            })
            .verifyScreenshot('#selector', 'selector', {
                excludes: [{
                    selector: '.exclude-node'
                }]
            })
            .verifyScreenshot('full-browser-window', {
                excludes: [{
                    selector: '.exclude-node'
                }]
            })
            .verifyScreenshot('#selector', 'selector', {
                excludes: [{
                    selector: '.exclude-node',
                    color: '#0000ff'
                }, {
                    selector: '.another-exclude-node-to-fill' // default color is #ff0000
                }]
            });
    })
    • Run tests. On first run screenshots will be taken and stored in referencePath folder. The file structure mimics structure of tests. So, if test suite is at {testBasePath}/some/dir/my-test.js, screenshots from it will be stored at {referencePath}/some/dir/my-test/{screenshot name}.{browser}.png. Then you might want to manually test whether screenshots are good.

    Keywords

    none

    Install

    npm i @manychat/hermione-verify-screenshot

    DownloadsWeekly Downloads

    0

    Version

    0.0.19

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • gurugray
    • zakharovmc
    • manychat-owner
    • itoldya
    • niknoi
    • dmitry-ship
    • kib357
    • dgolovachev
    • ivahaev