iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Loki is for capturing and comparing Storybook stories, not for taking a full-page screenshot of any arbitrary live website. Its documented workflow is to start or build Storybook, create reference images with loki update, and run loki test to capture and compare. Loki can set viewport dimensions or crop to a CSS selector, but those controls do not establish a general full-page capture mode.
Can Loki take a full-page screenshot of any website?
No—not according to Loki’s documented workflow. Loki is a visual-regression tool for Storybook projects: it captures stories and compares them with saved reference screenshots. The documentation does not describe entering an arbitrary live-site URL and capturing its entire document. See the Loki documentation and CLI reference.
If you mean a story rendered in your project’s Storybook, Loki can capture it as part of a repeatable comparison workflow. If you mean a one-off, full-document image of a public URL, Loki is not the documented fit. Keep those two tasks distinct: visual regression checks whether a Storybook story changed; full-page website capture aims to include content beyond the current viewport.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Capture and compare a Storybook story with Loki
-
Configure Loki
From your project, run
loki init. It can detect the project type and add configuration under thelokikey inpackage.json. You can also maintain settings in.lokirc,.lokirc.json, orloki.config.js. Confirm the generated configuration matches your Storybook setup. -
Start Storybook
Start the Storybook server using your project’s normal command before invoking Loki. Loki does not start the server for you. Alternatively, build Storybook and point Loki at the static output using
--reactUri file:./storybook-static. -
Create the reference images
Run
yarn loki update. Loki captures the configured stories and stores reference images in its default Loki folder. Review the images and, as the Loki docs recommend, check references into your repository; Git LFS is an option for managing image files. -
Run the visual comparison
Run
yarn loki test. Loki captures the stories again and compares the results with the references. When running through Yarn or npm, pass Loki flags after--so the package manager forwards them. For example, a CI run against a static Storybook build with reference images required can use:PerformancePC Slower Than It Used to Be?DriversOutdated Drivers Are Slowing You DownPerformanceWindows Errors? Fix Them Before They SpreadSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.Rank #2
Sale
HTML and CSS: Design and Build Websites- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
yarn loki test -- --reactUri file:./storybook-static --requireReferenceCheck the syntax against your installed Loki version and project scripts before adopting the command.
-
Review differences and approve intentional changes
Inspect current captures under
loki/currentand visual differences underloki/difference. If a change is intentional, runyarn loki approve, inspect the updated references, and commit them. Do not approve differences until you have checked that they reflect the intended design rather than a rendering or loading problem.
Control the captured region and viewport
Use a selector to crop a story
The chromeSelector setting selects a CSS region and crops the screenshot to its dimensions. The default CLI selector is #root > *. This is a crop, not a full-page switch: Loki’s documentation cautions that absolutely positioned elements above the selected region may still appear in the crop, and the setting does not mean Loki captures the DOM element itself.
Rank #3
Set viewport dimensions
Set width and height in Loki’s configuration to control the viewport used for capture. disableAutomaticViewportHeight prevents Loki from increasing the viewport height just because content extends below it. These options affect viewport sizing; they are not documented as a general full-document capture mode for arbitrary websites.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Emulate print media only when that is the test you need
chromeEmulatedMedia can emulate print media, and Loki’s 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 whole-site screenshot workflow.
Make Storybook captures more reliable
Visual comparisons are only useful when the story is ready and renders consistently. Loki’s guide notes that asynchronous computations and rerenders after data loads can produce incorrect or flaky captures. When a story needs an explicit readiness signal, use the asynchronous completion callback described in the Loki guide to flaky tests.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Loki’s guide says it disables common CSS transitions, CSS animations, and requestAnimationFrame behavior by default and captures the transition end state. It lists looped requestAnimationFrame animations, GIFs, SVG animations, native Lottie animations, and React Native Animated as known limitations. For stable references, disable or otherwise control those animations in the story or test environment.
The CLI reference documents a 60,000 ms default page-load timeout, zero default Chrome screenshot retries, and zero default tolerated image difference. These are documented defaults, not recommendations for every project; check the installed Loki version and local configuration, especially if rendering is slow or sensitive to small pixel changes.
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 matchTroubleshoot common Loki screenshot problems
- Loki cannot reach the stories: Start the Storybook server before running Loki, or use a built Storybook URI such as
--reactUri file:./storybook-static. Loki does not launch the server itself. - Flags appear to be ignored: When running via Yarn or npm, put CLI flags after
--, for exampleyarn loki test -- --reactUri file:./storybook-static. - The image shows a partial region: Review
chromeSelector, plus configured viewport width and height. Selector cropping is not a full-page capture mode. - A story is captured before it finishes loading: Make readiness explicit for asynchronous stories using the callback approach in Loki’s flaky-test guide. A longer timeout alone does not signal that application-specific rendering has completed.
- Repeated differences come from motion: Disable or control animations that the guide identifies as limitations, including looping
requestAnimationFrame, GIF, SVG, native Lottie, and React Native Animated effects. - References update unexpectedly: Use
loki updateonly when creating or intentionally replacing baselines. Inspectloki/currentandloki/differencebeforeloki approve. - Behavior differs from these instructions: Loki’s documentation pages cited here display a last-updated date of 2024-08-27. CLI names, defaults, and compatibility may change; verify against the version installed in your project.
Or skip the browser setup
If you need a screenshot of a live URL rather than a Storybook visual-regression run, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. For example, using cURL:
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 API documentation for request options. It accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers indicate the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan 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—no card required.
Frequently Asked Questions
Does Loki save screenshots for later visual-regression tests?
Yes. loki update creates reference images, and loki test compares new captures against them.
Can I use Loki with a static Storybook build in CI?
Yes. The CLI accepts a static Storybook URI such as --reactUri file:./storybook-static; the CI guide shows using it with --requireReference.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsQuick 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.
