Use Loki to compare Storybook stories with committed reference screenshots: install and initialize Loki, review the generated configuration, create and inspect baselines with yarn loki update, then run yarn loki test after UI changes. For an Indian storefront, make representative stories for applicable price, offer, seller/contact, consent and cancellation/refund states. Loki checks rendered UI; it does not replace functional checkout tests or legal review.
What Loki tests—and what it does not
Loki is a visual-regression tool for Storybook. It captures Storybook stories and compares them with stored reference images. It does not start Storybook for you, test a live ecommerce site end to end, or establish whether checkout, payment, or legal compliance works. See the Loki documentation for the tool’s scope.
Use it for repeatable visual states of components and pages represented in Storybook. Use a separate functional test approach for interactions such as adding an item to the cart, completing payment, or verifying refund processing.
Install Loki and prepare Storybook
Loki’s guide lists Node 16 or later as a prerequisite. Its quick start uses Yarn. The documentation page was last updated 2024-08-27, so check it for current version-specific details before adopting the commands in a newer environment.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
-
From the project directory, install Loki as a development dependency:
yarn add loki --dev. -
Initialize its configuration:
yarn loki init. -
Review the
lokiconfiguration added topackage.json. The guide’s web defaults use laptop and iPhone configurations with the local Chrome app. Keep only the targets that your project will maintain consistently. -
Start Storybook before invoking Loki. For iOS or Android targets, start the relevant simulator or emulator and run the Storybook app there.
The Loki guide lists optional dependencies for particular targets: GraphicsMagick 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. These are target-specific rather than prerequisites for every web project. Confirm current requirements in the Loki guide.
Recommended Free Tools
Create and review baseline screenshots
-
With Storybook running, generate the initial references:
yarn loki update. -
Inspect the generated images before treating them as the approved baseline. Loki stores them in a
lokifolder; the guide says they can be committed to Git or stored with Git LFS. -
Commit reviewed references with the code and story data they represent. A baseline is a record of the expected appearance, not proof that the appearance is correct.
After changing the interface, run yarn loki test. Inspect the current screenshots under loki/current and the differences under loki/difference. If a visual change is intended, use Loki’s suggested targeted update command or yarn loki approve, review the new image, and commit it with the UI change. Do not approve a difference merely to make a flaky check pass.
Build deterministic stories for Indian storefront states
Stories should represent fixed, named UI states instead of pulling live production data. That makes a diff easier to interpret and prevents prices, availability, or remote content from changing the screenshot unexpectedly.
Choose states that matter to your interface
-
Product cards and detail views with representative prices, including an offer or discount presentation where the storefront uses one.
-
Empty and populated carts, form-validation errors, and an order confirmation state.
-
Applicable seller identity and customer-care or grievance contact information states.
Recommended: Fix Windows Errors and Clear Junk Files in Minutes - Free Scan →Recommended: Crashes or Glitches? A Free Driver Scan Usually Finds the Culprit →Recommended: PC Feels Slow? A Free Scan Shows What's Dragging Windows Down →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Purchase-consent controls, including an unchecked initial state when the UI requires an affirmative action.
-
Cancellation and refund messaging where those terms appear in the interface.
The Consumer Protection (E-Commerce) Rules, 2020 describe requirements including display of certain entity and contact details, a grievance mechanism, affirmative action for purchase consent, and cancellation/refund rules. Which provisions apply depends on the business model and current operative law. Use the rules as prompts for visible UI coverage, not as legal advice or a substitute for legal review. The government 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.” See the Consumer Protection (E-Commerce) Rules, 2020.
A Press Information Bureau release posted 2026-09-10 says the Consumer Protection (E-Commerce) Amendment Rules, 2026 come into force on 2027-01-01. That date is future-dated relative to this article’s 2026-10-03 publication context. Check the official rules and effective date again before relying on a legal requirement.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsKeep captures stable
-
Use fixed story data, viewport, browser, fonts, and assets. Avoid relying on production APIs or changing inventory and pricing.
-
For delayed rendering, use Loki’s asynchronous callback pattern so capture waits until the component is ready. The guide notes it handles many network and image-loading cases, but asynchronous components may still need explicit coordination.
-
Loki disables common CSS transitions and animations and
requestAnimationFrameby default. Documented limitations include loopingrequestAnimationFrame, GIFs, SVG animations, and React Native Animated. Freeze or disable these in fixtures, or skip a state if a single stable screenshot is not meaningful.
See the Loki advanced setup documentation for the asynchronous and animation details.
Run Loki in continuous integration
Build a static Storybook and require references so missing baselines fail rather than silently leaving a story unchecked. Loki documents this pattern:
build-storybook && loki --requireReference --reactUri file:./storybook-static
Use a CI browser and operating-system environment aligned with the one that produced the reference screenshots. Screenshot comparisons can change with host OS, browser version, settings, hardware, power source, and headless mode. Playwright’s general visual-comparison guidance recommends using the same environment for creating and comparing baselines; that is general screenshot guidance, not a Loki compatibility guarantee. See Playwright visual comparisons.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common Loki screenshot failures
Storybook cannot be reached
Start the Storybook server before the Loki command. For mobile targets, also start the required simulator or emulator with the Storybook app running.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →A story is missing a reference
Generate and review its baseline with yarn loki update. In CI, --requireReference intentionally makes a missing reference fail; do not remove that safeguard just to turn the check green.
Images differ on every run
Check for variable data, delayed fonts or images, animations, viewport differences, and mismatched browser or OS versions. Make the fixture deterministic and align the comparison environment before approving any changed reference.
A component is captured before it finishes rendering
Wait for its asynchronous work with Loki’s documented callback pattern. Prefer local, predictable fixture data over network-dependent rendering.
Animation or media produces noisy diffs
Disable or freeze the effect in the story. For states such as looping animation that cannot be represented reliably as one image, skip visual comparison for that story rather than accepting unstable output.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server, not a Loki or Storybook replacement. For a one-off page capture, its API can return an image directly from one GET request. This example saves a WebP response; see the ScreenshotNeo API documentation for parameters and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-store.example -o shot.webp
ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; these steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. 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.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month without a card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Can Loki test a live production checkout?
No. Loki compares Storybook-rendered stories with reference images; it does not run a complete production checkout flow.
Does a Loki visual test confirm that an Indian ecommerce site complies with consumer law?
No. It can help check visible interface states, but applicability and legal compliance require separate review.
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.
