Visual Regression Testing for Storybook

   

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+

$3

- GraphicsMagick for gm diffing engine, brew install graphicsmagick
- Docker for the chrome.docker target.
- Chrome 59+ 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
- Getting started
- Configuration
- Command line arguments

Examples

- React example
- React Native example

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. © Joel Arvidsson 2017-present