BackstopJS vs Loki
BackstopJS
github.com
Loki
loki.js.orgSide by side
| Figure | BackstopJS | Loki |
|---|---|---|
| Price from | Free | Free |
| Free plan | Yes | Yes |
| Free trial | — | — |
| Open source | — | — |
| Web | — | Yes |
| Windows | — | Yes |
| macOS | Yes | Yes |
| Linux | Yes | Yes |
| iOS | — | Yes |
| Android | — | Yes |
| Self-hosted | Yes | Yes |
| Plans published | 1 | 1 |
| Spec score · Visual Regression Testing Software | 8.0 (#11) | 8.6 (#4) |
| License | GitHub identifies the project as MIT licensed. | The project repository identifies Loki as MIT licensed. |
| Purpose | BackstopJS automates visual regression testing of web apps by comparing screenshots over time. | Loki tests Storybook projects for visual regressions by comparing screenshots with reference images. |
| Security | The README recommends matching the Docker container user to the local environment to improve security and avoid file ownership problems. | The command-line reference documents a `chromeDockerWithoutSeccomp` option, which defaults to false. |
Plans
In their own words
BackstopJS
BackstopJS is a free, MIT-licensed tool for visual regression testing of web applications. It captures screenshots and compares them with reference images over time. An in-browser report shows reference, test and visual-difference views, with additional CLI and JUnit reports. BackstopJS supports Puppeteer and Playwright; Playwright can use Chromium, Firefox or WebKit. Scenarios can script clicks, scrolling, hovering, key presses and cookie state. Captures can cover a full document, viewport or selected DOM elements at configured viewport sizes. The documented workflow uses `backstop init`, `backstop test` and `backstop approve` to configure tests, compare captures and update references. Installation works globally or locally through npm, as a standalone CLI or from a Node.js app. CI reporting and integrations include Jenkins, Travis and gulp. Docker can reduce rendering differences, though Chrome Headless in Docker needs substantial memory.
Loki
Loki is a free, MIT-licensed tool for checking Storybook projects for visual regressions. It captures story screenshots and compares them with reference images, producing visual differences for review. The workflow is to create reference screenshots, run comparisons, review the differences, and approve updated references. Loki is designed for continuous integration, where tests can fail if reference images are missing. Capture targets include Chrome in Docker or locally, Chrome in AWS Lambda, the iOS simulator, and the Android emulator; an AWS Lambda renderer is available for large test suites. Node 16 or later is required. Recent Storybook versions need no extra integration for non-React Native projects, while React Native setup uses an import in `storybook/storybook.js`. Projects can configure Loki in a `package.json` section or supported Loki configuration files. Loki does not start Storybook or simulator and emulator servers, so they need to be running before tests. Documented animation limitations include looping requestAnimationFrame animations, GIFs, SVG animations, native Lottie animations, and React Native Animated.