Whoopsie is a visual regression tool for testing responsive web sites
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
config
spec
src
templates
.eslintrc.json
.gitignore
.snyk
.travis.yml
Dockerfile
LICENSE
README.md
example-output.png
package.json

README.md

Whoopsie

Build Status Coverage Status

Whoopsie is a visual regression tool for testing responsive web sites.

Installation

$ npm install -g whoopsie

Note: Whoopsie requires Node.js 8 or higher and a recent version of ImageMagick.

Configuration

See config/sample.yaml for a sample configuration file.

Usage

Commands

gallery

Run visual regression tests and generate an HTML gallery containing the results. This command is an alias for whoopsie test --reporter gallery.

$ whoopsie gallery path/to/config.yaml

test

Run visual regression tests. Uses the json reporter by default.

$ whoopsie test path/to/config.yaml

validate-config

Check that the configuration file is valid.

$ whoopsie validate-config path/to/config.yaml

Options

Name Default value Description
--reporter json Test result reporter(s) to use.
--concurrency os.cpus().length Number of tests to run concurrently
--verbose <Off> Print extra information while running
--debug <Off> Print extra debugging information while running
--quiet <Off> Only print errors while running

Reporters

Reporters can be specified when running whoopsie test by passing the --reporter flag. More than one reporter can be specified. The default reporter is json.

gallery

Outputs test results as an HTML gallery.

json

Outputs test results as JSON.

{
    "summary": {
        "total": 2,
        "failures": 0,
        "passes": 2
    },
    "results": [
        {
            "base": {
                "type": "selector",
                "selector": ".nw-c-top-stories",
                "id": "capture$ad367858",
                "page": {
                    "path": "/news",
                    "selectors": [
                        ".nw-c-top-stories",
                        ".nw-c-must-see"
                    ],
                    "url": "http://www.bbc.com/news"
                },
                "imagePath": "/tmp/whoopsie-capture$ad367858-0.png"
            },
            "test": {
                "type": "selector",
                "selector": ".nw-c-top-stories",
                "id": "capture$c1dbebb0",
                "page": {
                    "path": "/news",
                    "selectors": [
                        ".nw-c-top-stories",
                        ".nw-c-must-see"
                    ],
                    "url": "http://www.test.bbc.com/news"
                },
                "imagePath": "/tmp/whoopsie-capture$c1dbebb0-0.png"
            },
            "diff": {
                "total": 0,
                "percentage": 0,
                "id": "compare$520b7196",
                "imagePath": "/tmp/whoopsie-compare$520b7196.png"
            },
            "viewport": {
                "width": 640,
                "isMobile": true
            }
        },
        {
            "base": { ... },
            "test": { ... },
            "diff": { ... },
            "viewport": { ... }
        }
    ]
}

Docker

If you prefer to run Whoopsie in a container, you can use the official Docker image:

$ docker pull wildlyinaccurate/whoopsie
$ docker run --rm --volume $PWD:/whoopsie --workdir /whoopsie \
    wildlyinaccurate/whoopsie \
    whoopsie gallery /whoopsie/path/to/config.yaml

License

ISC