Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/airtoxin/enantiom

All-in-one web page screenshot testing tool.
https://github.com/airtoxin/enantiom

Last synced: about 9 hours ago
JSON representation

All-in-one web page screenshot testing tool.

Awesome Lists containing this project

README

        

# [enantiom logo](https://github.com/airtoxin/enantiom)

[![npm version](https://badge.fury.io/js/enantiom.svg)](https://badge.fury.io/js/enantiom)
![GA test](https://github.com/github/docs/actions/workflows/test.yml/badge.svg?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

All-in-one web page screenshot testing tool.

![console](./docs/console.png)

## ✨ Features

- Take screenshot and compare with previous one
- Create static HTML report
- Change browser type / screen size
- Browser scripting

## 📦 Usage

Install the cli via **NPM**:

```
npm i -g enantiom
```

Install the cli via **Yarn**:

```
yarn global add enantiom
```

Create `enantiom.config.json`.

```json
{
"artifact_path": "./dist",
"screenshots": ["https://example.com", "https://time.is"]
}
```

Then, run enantiom cli with config option.

```shell
$ enantiom --config enantiom.config.json
```

One more time, run same command to calculate pixel diff from previous result.

```shell
$ enantiom --config enantiom.config.json
```

Static result report output to `dist` directory.
Open it!

```shell
$ npx serve dist
```

## ⚙ Config

- [enantiom CLI options](./docs/CLI_OPTIONS.md)
- [enantiom.config.json](./docs/CONFIG_JSON.md)

examples are exists in [example](./example) directory.

## Development

Setup: just run `npm install`

### Tool development

```shell
$ npm run build
$ npm link
$ enantiom --config example/enantiom.config.json --no-html
```

### React console development

```shell
$ npm run dev --config example/enantiom.config.json
$ npm run site:dev
```

## Feature TODOs

- Debug mode
- Reuse browser object option