To run Loki screenshot tests for an Indian ecommerce website, first make its Storybook stories deterministic, capture and review reference images with yarn loki update, then compare later changes with yarn loki test. In continuous integration (CI), build the static Storybook and run Loki with --requireReference so missing baselines fail the check. Add stories for the storefront states customers actually see—including applicable prices, offers, consent, seller and grievance details, and cancellation or refund messaging—but treat those as UI coverage, not proof of legal compliance.
What Loki tests—and what it does not
Loki is a visual-regression testing tool for Storybook. It captures Storybook stories and compares them with stored reference screenshots to reveal visual changes. It does not create your Storybook or start its server for you: you must provide a running Storybook for local testing, or build a static Storybook for CI. Loki screenshot comparisons also do not verify that checkout, payment, or other business logic works correctly.
As an Amazon Associate I earn from qualifying purchases.
This makes Loki useful for checking stable, named UI states such as product cards, carts, form errors, and order confirmations. Use separate functional or end-to-end tests for interactions and transaction behavior.
Install Loki and establish the first baseline
Loki’s guide lists Node.js 16 or later as a prerequisite. Its documented quick start uses Yarn:
#1 Best Overall
- Install Loki as a development dependency:
yarn add loki --dev. - Initialize its configuration:
yarn loki init. - Review the
lokiconfiguration added topackage.json. The guide describes web defaults using laptop and iPhone configurations with the local Chrome app. - Start the Storybook server. For iOS or Android targets, start the corresponding simulator or emulator with the Storybook app available.
- Generate initial reference images:
yarn loki update. - Review the generated images before committing them. Loki stores references in a
lokifolder; the guide says they can be checked into Git or stored with Git LFS.
These setup details come from Loki’s guide, last updated 2024-08-27, and may change. Its optional dependencies depend on your target: GraphicsMagick is listed for the gm diff engine, Docker for chrome.docker, Chrome 59 or later for chrome.app, and a React Native Android dev-settings package for emulator crash recovery. Add only what your chosen configuration requires.
Run comparisons and review changes safely
- Make the UI change you want to check.
- Run
yarn loki test. - Inspect captured screenshots in
loki/currentand visual differences inloki/difference. - Decide whether each difference is an intended design change or an unintended regression. If intended, use Loki’s suggested targeted update command or
yarn loki approve, then commit the updated references alongside the code change.
Do not approve a diff just to make a flaky test pass. Investigate unstable data, timing, fonts, assets, viewport, and browser differences first. A baseline is an expected appearance, not an assertion that the underlying ecommerce flow behaves correctly.
Build useful, India-facing ecommerce stories
Prefer fixed fixtures to live storefront data
Create stories for deliberately chosen UI states instead of relying on production APIs or changing inventory. Depending on the site, useful examples include a product card with a representative price, a discount or offer state, empty and populated carts, validation errors, and an order confirmation. Fix story data, viewport, browser, fonts, and required assets so the same story renders consistently.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Cover relevant consumer-information and consent states
For an India-facing storefront, consider stories or visible-state checks for the business’s legal name and address, website details, customer-care and grievance-officer contact information, grievance mechanism, purchase consent, and cancellation or refund messaging where these are in scope. The Consumer Protection (E-Commerce) Rules, 2020 describe these kinds of consumer-facing requirements. The rules state: “Every e-commerce entity shall only record the consent of a consumer for the purchase of any good or service offered on its platform where such consent is expressed through an explicit and affirmative action, and no such entity shall record such consent automatically, including in the form of pre-ticked checkboxes.”
Whether a particular duty applies depends on the business model and current operative law. Screenshot tests can check that a designed state is visible; they cannot establish legal compliance. Have qualified counsel review applicability and wording. A Press Information Bureau release dated 2026-09-10 says the Consumer Protection (E-Commerce) Amendment Rules, 2026 take effect on 2027-01-01. That effective date is in the future as of 2026-10-03; verify the official rules and commencement date before relying on the amendments, and do not treat them as already in force.
Make captures deterministic
Loki’s guide says it handles many network and image-loading cases, but asynchronous components may need its async callback pattern so capture waits for rendering to finish. Use that when a story’s content is not ready at the instant Loki begins capture.
Loki disables common CSS transitions and animations, along with requestAnimationFrame, by default. Its documentation identifies limitations including looping requestAnimationFrame, GIFs, SVG animations, and React Native Animated. For those states, freeze or disable motion in the fixture, or skip the story if a stable single screenshot would be misleading. Do not compare a moving or time-dependent scene as though it had one reliable expected image.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRun Loki in CI with required references
Build Storybook to static files, then point Loki at that build and require references:
build-storybook && loki --requireReference --reactUri file:./storybook-staticThe --requireReference flag is intended to make a missing baseline fail the test instead of silently leaving a story unverified. Commit or otherwise provide the reference images to CI. Keep baseline generation and comparison environments aligned: operating system, browser version, browser settings, hardware, power source, and headless mode can affect screenshots. Playwright’s visual-comparison guidance makes this general warning; it is not a Loki-specific compatibility guarantee.
Choose the right layer for each check
| Approach | Best fit | Important distinction |
|---|---|---|
| Loki with Storybook | Visual regression of named component and UI states | Uses Storybook stories and Loki’s configured targets; it does not replace functional checkout tests. |
| Playwright visual comparisons | Screenshot assertions within a Playwright testing workflow | A separate option with its own screenshot and environment guidance; do not assume feature parity with Loki. |
| Chromatic | Hosted visual testing for Storybook | Storybook documents it as a cloud visual-testing service; this alone does not establish Loki integration, pricing, or comparative performance. |
Loki’s documented targets include local Chrome, Docker Chrome, and mobile simulators or emulators. Select execution based on the platforms you need and whether you can keep the capture environment consistent; a hosted service is a different execution model, not automatically a drop-in equivalent.
Troubleshoot common failures
- Storybook cannot be reached: Loki does not start it for you. Start the local server before testing, or build the static Storybook and use its file URI in CI.
- A story has no baseline: Run
yarn loki update, review the generated image, and commit or provide that reference. In CI,--requireReferencemakes missing references fail rather than pass unnoticed. - Images differ only in CI: Check whether baseline generation and CI use the same operating system, browser version, settings, hardware, and headless mode. Align those conditions before approving changes.
- Content is captured too early: Wait for asynchronous components to finish using Loki’s async callback pattern; avoid relying on arbitrary timing when a render-ready signal is available.
- Animated content produces unstable output: Freeze or disable animation in the test fixture, or skip a state that cannot be represented by a stable screenshot. Loki documents limitations for looping animation mechanisms, GIFs, SVG animations, and React Native Animated.
- A diff appears after an intentional redesign: Review the current image and difference, then approve only the intended change with Loki’s targeted update command or
yarn loki approve. - A screenshot passes but checkout is broken: Add or run functional and end-to-end tests. Loki’s visual comparison checks appearance, not successful payment, order creation, or server-side behavior.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server for developers. A single request can capture a URL as an image or PDF; it is a separate way to capture pages, not a replacement for Loki’s Storybook reference-and-diff workflow.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API details. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Can Loki test pages outside Storybook?
Loki’s workflow in this guide is built around Storybook stories; for arbitrary page captures, use a tool designed to capture URLs rather than treating Loki as a general website screenshot API.
Should I regenerate all reference images after every UI change?
No. Compare first, then update only the baselines for visual changes the team intentionally accepts.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
