<commit_before># intern-visual

This project adds support for visual regression testing to
[Intern](https://theintern.io).

<!-- start-github-only -->

[![Build Status](https://travis-ci.org/theintern/intern-visual.svg?branch=master)](https://travis-ci.org/theintern/intern-visual)<!-- end-github-only -->
[![Intern](http://theintern.github.io/images/intern-v4.svg)](https://github.com/theintern/intern/)

<!-- vim-markdown-toc GFM -->

* [Overview](#overview)
* [Installation](#installation)
* [Quick start](#quick-start)
* [API and architecture](#api-and-architecture)
	* [visualTest](#visualtest)
	* [assertVisuals](#assertvisuals)
	* [helpers](#helpers)
	* [Reporting results](#reporting-results)
* [Contributing](#contributing)

<!-- vim-markdown-toc -->

## 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

This plugin takes image snapshots of pages when they’re known to be rendering
properly, and then compares those images to how the page looks at later points
to detect visual regressions.

For example, here's a simple login page:

<img alt="good login page" src="./docs/good.png" width="245" />

Assume you’ve created a visual test called “login page” for this page. The first
time the test is run it will save a snapshot image (a _baseline_) of the page.

At some point, someone may change a style that has a side effect of making `h1`
tags use a serif font. Now the the login page looks like this:

<img alt="bad login page" src="./docs/bad.png" width="245" />

Normal unit tests aren‘t going to see anything wrong here, because the content
is the same. However, the next time the visual test is run for that page it will
fail because the page no longer looks the same. A report will be generated that
highlights the changes:

<img alt="visual assertion report" src="./docs/report.png" />

## Installation

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

```
$ npm install intern intern-visual --save-dev
```

## Quick start

Ok! You want to see all the great things visual regression testing can do and
how to do it! See some real test code by looking in the
[tests/visual](./tests/visual) directory.

To run our visual regression tests:

1.  Clone this project<commit_msg>Update image paths in README<commit_after># intern-visual

This project adds support for visual regression testing to
[Intern](https://theintern.io).

<!-- start-github-only -->

[![Build Status](https://travis-ci.org/theintern/intern-visual.svg?branch=master)](https://travis-ci.org/theintern/intern-visual)<!-- end-github-only -->
[![Intern](http://theintern.github.io/images/intern-v4.svg)](https://github.com/theintern/intern/)

<!-- vim-markdown-toc GFM -->

* [Overview](#overview)
* [Installation](#installation)
* [Quick start](#quick-start)
* [API and architecture](#api-and-architecture)
	* [visualTest](#visualtest)
	* [assertVisuals](#assertvisuals)
	* [helpers](#helpers)
	* [Reporting results](#reporting-results)
* [Contributing](#contributing)

<!-- vim-markdown-toc -->

## 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

This plugin takes image snapshots of pages when they’re known to be rendering
properly, and then compares those images to how the page looks at later points
to detect visual regressions.

For example, here's a simple login page:

<p align="center"><img src="https://cdn.rawgit.com/theintern/intern-visual/master/docs/good.png" alt="Good login sample" width="245"></p><br>

Assume you’ve created a visual test called “login page” for this page. The first
time the test is run it will save a snapshot image (a _baseline_) of the page.

At some point, someone may change a style that has a side effect of making `h1`
tags use a serif font. Now the the login page looks like this:

<p align="center"><img src="https://cdn.rawgit.com/theintern/intern-visual/master/docs/bad.png" alt="Bad login sample" width="245"></p><br>

Normal unit tests aren‘t going to see anything wrong here, because the content
is the same. However, the next time the visual test is run for that page it will
fail because the page no longer looks the same. A report will be generated that
highlights the changes:

<p align="center"><img src="https://cdn.rawgit.com/theintern/intern-visual/master/docs/report.png" alt="Visual assertion report"></p><br>

## Installation

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

```
$ npm install intern intern-visual --save-dev
```

## Quick start

Ok! You want to see all the great things visual regression testing can do and
how to do it! See some real test code by looking in the
[tests/visual](./tests/visual) directory.

To run our visual regression tests:

1.  Clone this project
{'fraction_non_alphanumeric': 0.10701914311759343, 'fraction_numerical': 0.0032816773017319964, 'mean_word_length': 4.541414141414141, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 26, 'https://': 11, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3560675', 'n_tokens_mistral': 1618, 'n_tokens_neox': 1510, 'n_words': 652}