# visual-check-testcafe

> Testcafe plugin for testing visual regression backed by resemblejs image compare

Latest version **0.0.3** (published 2020-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install visual-check-testcafe
pnpm add visual-check-testcafe
yarn add visual-check-testcafe
bun add visual-check-testcafe
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-10-06 |
| First published | 2020-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 59.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Joost van Dieten |
| Maintainers | test-assured |
| Keywords | testcafe, testcafe plugin, visual compare, screenshot compare, testcafe visual, testcafe layout, testcafe image compare, testcafe visual check, visual regression, layout testing, layout regression, visual test, layout test |

## Links

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

## Dependencies (3)

- [canvas](https://npm.io/package/canvas.md) ^2.6.1
- [handlebars](https://npm.io/package/handlebars.md) ^4.7.6
- [resemblejs](https://npm.io/package/resemblejs.md) ^3.2.3

## 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
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2020-10-06
- 0.0.2 — 2020-10-05
- 0.0.1 — 2020-10-05

## README

[![NPM](https://nodei.co/npm/visual-check-testcafe.png)](https://nodei.co/npm/visual-check-testcafe/)

# visual-check-testcafe

Testcafe plugin for testing visual regression backed by resemblejs image compare

## Features

- Fully integrated in test run
- Concurrency support
- Multi-browser support
- Reporting including multi-browser

## Installation

```bash
npm install visual-check-testcafe --save-dev
```

## How to use

You can write a TestCafe test with automated visual testing like this.

```js
import { visualCheck } from 'visual-check-testcafe';

fixture `TestCafe tests with Visual compare`
    .page `http://example.com`;

test('Automated visual testing', async t => {
  await visualCheck(t, options);
});

```

### Reporting


<p align="center">
  <img width="600" height="400" src="report.png">
</p>

Report will be located at .reports/visual-check-testcafe/report.html

### Options
```
visualCheck(t, options?)
```

- `options.label` &mdash; Custom name for the taken snapshot
- `options.timeout` &mdash; Waiting time before taking snapshots
- `options.selector` &mdash; String, or `Selector()` to match on the DOM
- `options.maxDiffPercentage`&mdash; Default is 0.1 

### Setup 
Each time you run tests with --setup-baseline it'll take the base screenshots.
It will report during test in the following way:

```bash
visual-check-testcafe: Baseline {path} created
```

During a test run it can occur a baseline is not there. If you haven't provided 
 the --setup-baseline your test will fail with the following message:

```bash
AssertionError: visual-check-testcafe: no baseline present, storing baseline for next run: expected 'no baseline' to be falsy
      
      + expected - actual
      
      -'no baseline'
      +undefined
```

## RoadMap

- Add configurable output folder
- Add custom typings for testcontroller testRun
- Add automated tests

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