Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/visual-regression-tracker/visual-regression-tracker

Backend and Frontend application for tracking differences via image comparison
https://github.com/visual-regression-tracker/visual-regression-tracker

cypress docker hacktoberfest image-comparison playwright regression-tests testing visual-testing visual-tests

Last synced: about 17 hours ago
JSON representation

Backend and Frontend application for tracking differences via image comparison

Host: GitHub
URL: https://github.com/visual-regression-tracker/visual-regression-tracker
Owner: Visual-Regression-Tracker
License: apache-2.0
Created: 2020-05-09T10:53:36.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-07-27T18:59:39.000Z (5 months ago)
Last Synced: 2024-10-29T11:58:20.309Z (about 2 months ago)
Topics: cypress, docker, hacktoberfest, image-comparison, playwright, regression-tests, testing, visual-testing, visual-tests
Language: Shell
Homepage: https://visual-regression-tracker.com
Size: 12.5 MB
Stars: 601
Watchers: 20
Forks: 58
Open Issues: 53
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://stand-with-ukraine.pp.ua)

Visual Regression Tracker

Open source, self hosted solution for visual testing and managing results of visual testing.

## Hello
* Take [1-minute survey](https://forms.gle/DidGSodojQ4Qn4is6) to help us priorities tasks better ❤️
* [Twitter](https://twitter.com/VisualReTracker)
* [Telegram group](https://t.me/visual_tracker)

## How it works
Service receives images, performs pixel by pixel comparison with it’s previously accepted baseline and provides immediate results in order to catch unexpected changes.

![Demo](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/blob/master/public/demo.gif)

## Features
* **Automation framework independent** - no need to stick with specific automation tool, integrate with existing one
* **Platform independent** - web, mobile, desktop etc. as long as you could make a screenshot
* **Baseline history** - track how baseline image changed since the beginning
* **Ignore regions** - improve stability by ignoring not important or not controllable parts of image
* **Language support** - JS, Java, Python, .Net or any other via REST API (need more?)
* **Easy setup** - everything is inside Docker images
* **Self-hosted** - keep your data save inside your intranet
* **Can compare PDF too** - use standalone jar to compare pdf and images from a folder

## Glossary
* TestVariation - historical record of Baselines by Name + Branch + OS + Browser + Viewport + Device,
* Baseline - validated and accepted image, latest will be used as expected result in TestRun
* TestRun - result of comparing image against Baseline
* Build - list of TestRuns
* Project - list of Builds and TestVariations

## Set up

Use any of the below ways to setup the server. [Docker](https://docs.docker.com/get-docker/) has to be installed on the machine.

Quick Setup

### Linux, macOS, WSL

1. Download the installation script

```
curl https://raw.githubusercontent.com/Visual-Regression-Tracker/Visual-Regression-Tracker/master/vrt-install.sh -o vrt-install.sh
chmod a+x vrt-install.sh
```

2. Run the installation script

`./vrt-install.sh`

#### Command line arguments

```
Installs the Visual Regression Tracker

Usage: ./vrt-install.sh

Arguments:
-h | --help
-a | --frontend-url Set the Front-end url. Default: http://localhost:8080
-r | --backend-url Set the API url. Default: http://localhost:4200
--jwt-secret Set the JWT secret. Default: randomly generated
```

Manual Setup

1. Copy [docker-compose.yml](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/blob/master/docker-compose.yml)

`$ curl https://raw.githubusercontent.com/Visual-Regression-Tracker/Visual-Regression-Tracker/master/docker-compose.yml -o docker-compose.yml`

2. Copy [.env](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/blob/master/.env)

`$ curl https://raw.githubusercontent.com/Visual-Regression-Tracker/Visual-Regression-Tracker/master/.env -o .env`

3. In .env file, ensure that the REACT_APP_API_URL has the right address. If it will be accessed from other machines, change localhost with IP or other resolvable name. Ensure the ports being used are free to use.

4. Start service

`$ docker-compose up`

Wait until you see your creds printed.

New users and projects could be created via frontend app by default on http://localhost:8080

![Success setup](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/blob/master/public/docker_setup_creds.png)

Run VRT with logging enabled in Elasticsearch

This is for the users who want to monitor VRT logs via Kibana. It is expected to have basic knowledge of Elastic stack (especially Kibana) for the admin so that the logs can be managed and dashboards created in Kibana.
Since logging will be retained by Elasticsearch, it will consume a little more memory and CPU. If you see error in the console, please consult Elasticsearch documentation.

_**It is recommended to run the program as root user which will ensure permission and ownership related issues will not have to be dealt with.**_

1. Clone or download this repository.
2. Move to the downloaded/cloned repository. In .env file, ensure that the REACT_APP_API_URL has the right address. If it will be accessed from other machines, change localhost with IP or other resolvable name. Ensure the ports being used are free to use.
3. Follow either of below sub steps.
- If your organization does not have Elasticsearch server running or if you want to start Elastic stack on your own, start service by giving below command.

`$ docker-compose -f docker-compose.yml -f docker-compose.elastic.logging.yml up`
- If you want to re-use the already running Elasticsearch server in your organization, go to `filebeat/config/filebeat.yml` and edit hosts to point to the Elasticsearch server. Also, point ELASTIC_URL to this server in .env file. Start service by giving below command.

`$ docker-compose -f docker-compose.yml -f docker-compose.logging.yml up`

4. If you are not using root user, in some OS, you may see an error `Exiting: error loading config file: config file ("filebeat.yml") must be owned by the user identifier (uid=0) or root`. In that case, press Ctrl+C, and follow [Elasticsearch instructions](https://www.elastic.co/guide/en/beats/libbeat/current/config-file-permissions.html). Once done, start the service again.

## Integration
Use implemented libraries to integrate with existing automated suites by adding assertions based on image comparison.
We provide native integration with automation libraries, core SDK and Rest API interfaces that allow the system to be used with any existing programming language.

### Agents
* [Playwright](https://www.npmjs.com/package/@visual-regression-tracker/agent-playwright)
* [Cypress](https://www.npmjs.com/package/@visual-regression-tracker/agent-cypress)
* [CodeceptJS](https://github.com/Visual-Regression-Tracker/agent-codeceptjs)
* [Robot Framework](https://github.com/NiceProjectPoland/robotframework-VRTLibrary)

### Core SDK
Basic wrapper over API to be used for integration with existing tools
* [JavaScript](https://www.npmjs.com/package/@visual-regression-tracker/sdk-js)
* [Java](https://github.com/Visual-Regression-Tracker/sdk-java)
* [Python](https://github.com/Visual-Regression-Tracker/sdk-python)
* [Dotnet](https://github.com/Visual-Regression-Tracker/sdk-dotnet)

## Getting started guide

### Videos

* [How to set up on Remote machine via ssh](https://www.youtube.com/watch?v=cPsHeKnqL2M&feature=emb_logo)

### Wiki

* [Cypress](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/wiki/Getting-started-with-Cypress)
* [Playwright](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/wiki/Getting-started-with-Playwright)
* [Storybook](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/wiki/Storybook)
* [Selenide (Java)](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/wiki/Getting-started-with-Selenide)
* [Jenkins VRT result publishing example (with JAVA SDK)](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/wiki/How-to-publish-VRT-result-in-jenkins)
* [Compare image and pdf files as CLI](https://github.com/Visual-Regression-Tracker/examples-java/tree/master/standalone-from-folder-maven)

## Integration examples
Here you could find examples
* [JavaScript](https://github.com/Visual-Regression-Tracker/vrt-examples-js)
* [Java](https://github.com/Visual-Regression-Tracker/examples-java)
* [Python](https://github.com/Visual-Regression-Tracker/examples-python)
* [Dotnet](https://github.com/Visual-Regression-Tracker/examples-dotnet)

## Contribution
1. Try it, raise tickets with ideas, questions, bugs and share feedback :)
1. More language support for SDK
1. More integration with specific testing frameworks (agents)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Pavel Strunkin}
💻 💼 🤔 🔌

_{Daniel Crowe}
🔌 👀

_{Surat Das}
💻 🔌

_{Oleksandr Romanov}
🔌

_{Terentev Denis}
🔌

_{JustSittinHere}
🔌

_{Dekara VanHoc}
🔌

_maddocnc
💻

_{Aaron Chelvan}
💻 📖

_marcm-qa
🔌

_Eduard-iCH
🔌

_Roman
💻

_{Dimitri Harding}
💻

_vkostromin94
🔌

_{Bruno Ferreira}
💻

_{Loïc PÉRON}
💻 🔌

_{Alexey Volkov}
🔌 💻

_{Egor Lipskiy}
🔌

_nitschSB
💻

_polyvisual
💻

_{Juga Paazmaya}
🔌 💻

_{Sebastian Weigand}
💻