# intern-visual

> Visual regression testing plugin for Intern

Latest version **0.1.2** (published 2017-04-04) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install intern-visual
pnpm add intern-visual
yarn add intern-visual
bun add intern-visual
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-04-04 |
| First published | 2016-11-15 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Paul Shannon |
| Maintainers | devpaul |
| Keywords | intern, plugin, visual, testing, test, visual regression, visual testing |

## Links

- npm: https://www.npmjs.com/package/intern-visual
- Repository: https://github.com/theintern/intern-visual
- Homepage: https://github.com/theintern/intern-visual#readme
- Issues: https://github.com/theintern/intern-visual/issues
- npm.io page: https://npm.io/package/intern-visual

## Dependencies (3)

- [pngjs](https://npm.io/package/pngjs.md) ^2.3.1
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [ts-helpers](https://npm.io/package/ts-helpers.md) ^1.1.2

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2017-04-04
- 0.1.1 — 2016-11-18
- 0.1.0 — 2016-11-15

## README

# Intern Visual Regression Testing

This project adds support for visual regression testing in [Intern](https://github.com/theintern/intern).

[![Build Status](https://travis-ci.org/theintern/intern-visual.svg?branch=master)](https://travis-ci.org/theintern/intern-visual)

## Overview

A visual regression test compares a screenshot of a webpage with a previously generated baseline providing the ability
to make automated comparisons against a known-good version to ensure nothing has changed.

These tests can help engineers

* ensure a page is rendered identically on various browsers
* identify when a css change has an undesired effect elsewhere
* put a quick set of visual tests around legacy code to identify regressions 

## Installation

The `intern-visual` package should be installed as a peer of Intern

```
$ npm install intern intern-visual
```

## Quick Start

Ok! You want to see all the great things Visual Regression Testing can do and how to do it! See real test code by
looking in the `tests/visual` directory.

To run our visual regression tests

1. clone this project
1. install some tools `npm install -g grunt-cli`
1. `npm install`
1. start selenium
1. `grunt test`

## APIs and Architecture

This Intern plugin can be broken down into three main pieces of functionality. The assertion layer is made up of
`assert` and `test`; they provide a programmatic and configuration based approach, respectively. The comparison layer
is used by the assertion layer to identify differences between the baseline and snapshot images. And the reporting
layer is used by Intern to generate HTML reports.

### assert

`assert` is a module that allows you to compare two sets of images (a baseline and snapshot). It is also responsible
for generating baselines as necessary for future test runs. The method is called during functional testing like this:

```typescript
import assertVisuals from 'visual/assert';

registerSuite({
    test() {
        this.remote()
            .get('https://sitepen.com')
            .setWindowSize(1024, 768)  // set the window size
            .takeScreenshot()
            .then(assertVisuals(this, {
                missingBaseline: 'snapshot'
            }));
    }
})
```

There are a number of options that can be passed to `assert` or set globally. The complete list of options can be 
seen in the module.

*baseline*: explicitly point to a baseline png to use. When this is not defined the test name is used to generate
 a path to a baseline
 
*regenerateBaselines*: when set to true, a new baseline will be automatically generated


### test

`test` provides a wrapper around the `assert` module that will create a visual regression test from configuration.

```typescript
import visualTest from 'visual/test';

registerSuite({
	test: visualTest({
		url: 'https://sitepen.com',
		width: 1024,
		height: 768,
		missingBaseline: 'snapshot',
	});
});
```

### reporters/VisualRegression

The `VisualRegression` reporter is responsible for creating a HTML report that reports (only) on the visual
regression tests. It can be used in combination with other Intern reporters.

```typescript
export reporters = [
    'Runner',
    { id: 'visual/reporters/VisualRegression', baselineLocation: './baselines', reportLocation: './reports' }
]
```

## Contributing

We would love to hear your feedback and welcome PRs. Please take a look at 
 [Intern's Contribution Guidelines](https://github.com/theintern/intern/blob/master/CONTRIBUTING.md) for some info
 and tips. Thanks!

---
_Source: https://npm.io/package/intern-visual · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._