Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oblador/loki
👁 Visual Regression Testing for Storybook
https://github.com/oblador/loki
android ios react react-native react-storybook storybook testing visual-regression visual-testing web
Last synced: 2 days ago
JSON representation
👁 Visual Regression Testing for Storybook
- Host: GitHub
- URL: https://github.com/oblador/loki
- Owner: oblador
- License: mit
- Created: 2017-07-10T08:33:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-12T05:41:37.000Z (2 months ago)
- Last Synced: 2024-10-29T14:54:20.754Z (about 1 month ago)
- Topics: android, ios, react, react-native, react-storybook, storybook, testing, visual-regression, visual-testing, web
- Language: JavaScript
- Homepage: https://loki.js.org/
- Size: 9.85 MB
- Stars: 1,777
- Watchers: 13
- Forks: 173
- Open Issues: 125
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - loki ★395 - Visual Regression Testing for Storybook (Components / Utils & Infra)
- Awesome-List - Loki - Visual Regression Testing for Storybook. (📦 Modules/Packages / Testing)
- awesome-regression-testing - Loki - Visual regression testing for Storybook using Chrome in docker et al. (Tools and frameworks)
- awesome-react-native - loki ★395 - Visual Regression Testing for Storybook (Components / Utils & Infra)
- awesome-react-native - loki ★395 - Visual Regression Testing for Storybook (Components / Utils & Infra)
- awesome-regression-testing - Loki - Visual regression testing for Storybook using Chrome in docker et al. (Tools and frameworks)
- awesome - oblador/loki - 👁 Visual Regression Testing for Storybook (JavaScript)
- awesome-react-native - loki ★395 - Visual Regression Testing for Storybook (Components / Utils & Infra)
README
# Visual Regression Testing for Storybook
[](https://github.com/oblador/loki/blob/master/LICENSE) [](https://github.com/oblador/loki/actions?query=workflow%3ATests) [](https://npmjs.com/package/loki) [](https://npmjs.com/package/loki)
## Rationale
There are a few visual regression tools for the web, but most either cannot be run headless or use phantomjs which is deprecated and a browser nobody is _actually_ using. They usually also require you to maintain fixtures. With react-native it's now possible to target multiple platforms with a single code base, but there's no single tool to test all to my knowledge.
Loki aims to have easy setup, no to low maintenance cost, reproducible tests independent of which OS they are run on, runnable on CI and support all platforms storybook does.
## Supported platforms
- Chrome in docker (recommended)
- Chrome in AWS Lambda
- Local Chrome application
- iOS simulator
- Android emulator
## Prerequisites
- [Node 16+](https://nodejs.org/)
### Optional dependencies
- [GraphicsMagick](http://www.graphicsmagick.org) for gm diffing engine, `brew install graphicsmagick`
- [Docker](https://www.docker.com/community-edition#/download) for the `chrome.docker` target.
- [Chrome 59+](https://www.google.se/chrome/browser/desktop/) for the `chrome.app` target, `brew cask install google-chrome-canary`.
## Installation
```
yarn add loki --dev
yarn loki init
```
## Workflow
Loki will not start any servers for you, so ensure storybook and any simulator/emulator is up and running before running tests.
1. Start storybook server
`yarn storybook`
2. Add first set of reference files
`yarn loki update`
3. Do some changes to your components
4. Test against references
`yarn loki test`
5. Review changes in diff folder
6. Approve changes and update references
`yarn loki approve`
## Documentation
- [Introduction](https://loki.js.org/)
- [Getting started](https://loki.js.org/getting-started.html)
- [Configuration](https://loki.js.org/configuration.html)
- [Command line arguments](https://loki.js.org/command-line-arguments.html)
## Examples
- [React example](https://github.com/oblador/loki/tree/master/examples/react)
- [React Native example](https://github.com/oblador/loki/tree/master/examples/react-native)
## Development
```bash
# Install dependencies
yarn
# Start example storybook
yarn workspace @loki/example-react run storybook
# Run example visual tests
yarn workspace @loki/example-react run test
# Run unit tests
yarn test
# Run cli integration tests
cd test/cli && yarn test
```
## Maintainers
Joel Arvidsson
Author
Tomas Echeverri Valencia
Maintainer
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2017-present