Loki is designed to capture and compare Storybook stories for visual regression testing; its documented workflow is not a general-purpose way to take a full-page screenshot of any live website URL. For a Storybook project, run the Storybook server or point Loki at a static build, create reference images with loki update, and use loki test to capture and compare. Loki can control viewport dimensions and crop to a CSS selector, but those settings do not establish arbitrary full-document capture.
Does Loki take a full-page screenshot of any website?
No—not according to Loki’s documented workflow. Loki captures Storybook stories and compares them with reference screenshots. If you mean an arbitrary live website URL and need a one-off image of its entire document, Loki is not documented as that kind of capture tool. If you mean a page or component rendered as a Storybook story, Loki can capture it for repeatable visual checks.
As an Amazon Associate I earn from qualifying purchases.
Keep the distinction in mind: a configured viewport or a selector crop changes what Loki captures in its Storybook workflow; neither setting is a general full-page mode for arbitrary URLs.
Free tools Windows power users keep installed
One-click scans. No signup required.
How to capture and compare a Storybook story with Loki
- Configure Loki. Run
loki initto detect the project type and add configuration under thelokikey inpackage.json. Alternatively, use.lokirc,.lokirc.json, orloki.config.js. Exact configuration options can vary by installed Loki version, so consult the matching documentation. - Start Storybook. Loki needs access to Storybook and does not start the server for you. Start it using the command appropriate to your project, then leave it running while Loki captures stories.
- Create baseline references. Run
yarn loki update. Loki saves reference screenshots in its default Loki folder. Review them and, as the documentation recommends, check them into the repository; Git LFS is an option for storing image files. - Run the visual comparison. Run
yarn loki test. Loki takes screenshots of the stories and compares them with the saved references. If you invoke Loki through Yarn or npm and pass flags, put the flags after--so the package manager forwards them. - Review differences before approving. Inspect current captures under
loki/currentand visual differences underloki/difference. If a change is intentional, runyarn loki approveand commit the updated references. Do not approve changes until you have checked that they are expected.
Use a static Storybook build in CI
Instead of connecting Loki to a running Storybook server, the CLI accepts a static build URI such as --reactUri file:./storybook-static. The Loki CI guide shows using a build with --requireReference. Confirm the flags against the Loki version installed in your project before putting them in a CI script.
#1 Best Overall
Control the capture region and viewport
Crop to a CSS selector
Set chromeSelector to a CSS selector when you want Loki to crop the capture to the selected region’s dimensions. The crop is not a screenshot of the DOM element alone: absolutely positioned elements above it can also appear. Loki’s CLI default selector is #root > *.
Set viewport dimensions
Configuration can specify viewport width and height. The disableAutomaticViewportHeight setting prevents Loki from increasing viewport height just because content extends below it. These controls affect viewport behavior; they do not establish a reliable full-page capture feature for a live URL.
Emulate print media
chromeEmulatedMedia can emulate print media, and the configuration reference includes presets such as A4 Paper and US Letter Paper. These are configuration options for Storybook testing, not evidence of a print-to-PDF or full-site screenshot workflow.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Make screenshots stable when stories render asynchronously
A story that loads data asynchronously or rerenders after capture begins can produce an incorrect or flaky image. Loki’s guide recommends an asynchronous completion callback when a story needs to signal explicitly that it is ready. Loki handles many network and image-loading cases, but a readiness signal is useful when ordinary loading behavior does not represent the final state you need to compare.
Rank #3
Loki documents that it disables common CSS transitions, CSS animations, and requestAnimationFrame behavior by default, and captures the transition end state. The guide lists looped requestAnimationFrame animations, GIFs, SVG animations, native Lottie animations, and React Native Animated as limitations. For stable visual references, disable or otherwise control those animations in the test environment when they affect the result.
Defaults and operational considerations
The CLI reference lists a default page-load timeout of 60,000 ms, zero default Chrome screenshot retries, and zero default tolerated image difference. These are documented defaults, not universal recommendations. Check the installed Loki version and project configuration before relying on them; a zero tolerated difference can make even small rendering changes fail comparison.
For a dependable workflow, keep the Storybook environment and references under version control, use the same capture configuration in local development and CI, and review image differences rather than automatically accepting them. If captures are slow or time out, first check whether Storybook is reachable and whether stories finish loading within the configured timeout. The documented default alone does not guarantee that every project’s stories will load in that time.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Troubleshooting Loki screenshots
| Symptom | Likely cause | What to check or do |
|---|---|---|
| Loki cannot load stories | Storybook is not running or the URI is wrong. | Start the Storybook server, or provide the correct static build URI, such as file:./storybook-static. |
| A flag appears to be ignored | Yarn or npm consumed the argument instead of forwarding it. | When invoking Loki through a package manager, put CLI flags after --. |
| The screenshot shows an incomplete state | The story rerenders or loads content after Loki starts capturing. | Use an asynchronous completion callback for stories that need an explicit readiness signal. |
| The crop includes unexpected content | chromeSelector crops to the selector’s dimensions, but absolutely positioned elements above it may remain visible. |
Check the selector and positioning of surrounding elements; do not treat the selector as an isolated-element screenshot. |
| Animated content differs between runs | The animation may be among Loki’s documented limitations. | Disable or control looped requestAnimationFrame, GIF, SVG, Lottie, or React Native Animated behavior in the test setup. |
| Captures time out | Storybook may be unreachable, or a story may not finish loading before the configured timeout. | Verify the server or build URI and investigate the story’s loading behavior. Check the installed version’s timeout configuration rather than assuming the documented 60,000 ms default fits the project. |
| Tests fail on a small visual change | The documented default tolerated image difference is zero. | Review the project’s comparison configuration and the actual difference images before changing tolerance or approving new references. |
Or skip the browser setup
If your goal is a screenshot of an arbitrary live URL rather than a Storybook visual-regression test, ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request returns an image or PDF. Its capture flow can accept cookie-consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed as clean shots, and response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
Example cURL request, using the API key and target URL as parameters:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the example URL with the page you want to capture. See the ScreenshotNeo API documentation for request options and response details. Free includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
Frequently Asked Questions
Can Loki save a Storybook screenshot as a new baseline?
Yes. Run yarn loki update to create or replace reference screenshots; inspect them before committing.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Does chromeSelector make Loki capture an entire long page?
No. It crops to a selected region’s dimensions; it is not a documented full-page capture switch.
Can Loki run in CI without a Storybook server?
Yes. The CLI accepts a static Storybook build URI, for example --reactUri file:./storybook-static.
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.
