Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nighttrax/mugshot
Framework independent visual testing library
https://github.com/nighttrax/mugshot
playwright puppeteer regression screenshot tdd testing webdriver webdriverio
Last synced: about 18 hours ago
JSON representation
Framework independent visual testing library
- Host: GitHub
- URL: https://github.com/nighttrax/mugshot
- Owner: NiGhTTraX
- License: mit
- Created: 2015-07-21T11:28:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-30T22:23:04.000Z (23 days ago)
- Last Synced: 2025-01-15T10:42:10.752Z (8 days ago)
- Topics: playwright, puppeteer, regression, screenshot, tdd, testing, webdriver, webdriverio
- Language: TypeScript
- Homepage: https://nighttrax.github.io/mugshot/
- Size: 7.47 MB
- Stars: 140
- Watchers: 36
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Framework independent visual testing library
[](https://github.com/NiGhTTraX/mugshot/actions/workflows/ci.yml)
[](https://codecov.io/gh/NiGhTTraX/mugshot)
[](LICENSE)
[**View Docs**](https://nighttrax.github.io/mugshot)
----
## Introduction
Mugshot is a node library for doing visual regression testing. The way screenshots are taken, processed, compared and stored is entirely customizable. You can use it to write visual regression tests for websites, mobile apps, native apps etc. Moreover, Mugshot doesn't impose any preferences on how you write or execute the tests, it just gives you an assertion that you can call however and whenever you want.
## Features
- Framework independent so you can choose your favorite tools or plug it into your existing testing suite.
- Produces diff images if a test fails.
- Throws on missing baselines (can be toggled through options).
- Everything is pluggable (screenshotter, differ, storage etc.).
## Installation
```console
npm install --save-dev mugshot
```
Or with yarn
```console
yarn add -D mugshot
```
Depending on how you want to take screenshots, you'll need a [`Screenshotter`](https://nighttrax.github.io/mugshot/api/interfaces/mugshot.screenshotter) implementation. Mugshot bundles a [`WebdriverScreenshotter`](https://nighttrax.github.io/mugshot/api/classes/mugshot.webdriverscreenshotter) that you can use with Webdriver compatible clients e.g. [Selenium](https://selenium.dev/) or [Appium](http://appium.io/). Each client might need an adapter that translates its API to the interface that Mugshot expects. The following adapters are available:
| Package | Version |
|----------------------------------------------|---------------------------------------------------------------|
| [@mugshot/webdriverio](packages/webdriverio) |  |
| [@mugshot/puppeteer](packages/puppeteer) |  |
| [@mugshot/playwright](packages/playwright) |  |
## Motivation
Manually checking one component for unexpected visual changes is hard. Doing it across your entire UI is harder. Doing it in multiple browsers/devices is even harder. Making sure everyone on your team does it is the hardest.
Mugshot aims to automate that process. It offers a simple API that lets you compare an existing baseline screenshot with a fresh screenshot and make sure they're identical. If they're not you'll get a diff image highlighting the differences. You can then commit it as the new baseline if the changes are expected, or fix the code and rerun the tests.
| Expected | Actual | Diff |
|-------------------------------------------------------|---------------------------------------------------|-----------------------------------------------|
|  |  |  |
## Docs
[**View Docs**](https://nighttrax.github.io/mugshot)
## License
[MIT](LICENSE)