How to Use Loki to Take a Full-Page Screenshot of a Website

Short answer: Loki is designed to capture Storybook stories for visual regression testing. Its documented workflow does not provide a general-purpose full-page screenshot of any arbitrary live website. For a Storybook story, start Storybook or build it, create reference images with loki update, then capture and compare with loki test. Loki’s selector and viewport settings control the captured area and viewport; they should not be treated as a documented full-page mode for arbitrary URLs.

If you need a one-off screenshot of a public website, use a tool built for URL capture. If you need repeatable component screenshots and visual diffs, Loki’s Storybook workflow is the relevant one.

1. Check that Loki fits the target

Goal	Does Loki’s documented workflow fit?
Capture a Storybook story repeatedly and compare it to a committed reference	Yes. This is Loki’s documented visual regression workflow.
Capture one full-document image of any live website URL	No documented general-purpose workflow. Use a URL screenshot tool.
Capture a selected region of a Storybook story	Use `chromeSelector`; it crops to the selector’s dimensions.
Control the browser viewport used for Storybook capture	Set viewport width and height and review automatic viewport-height behavior.

Loki does not start a Storybook server for you. You must make the stories accessible by starting Storybook or by supplying a built Storybook URI.

2. Install and configure Loki

Follow the installation instructions for your project’s Loki version, then initialize configuration from the project root:

npx loki init

The initializer can detect the project type and add configuration under the loki key in package.json. Configuration can also live in .lokirc, .lokirc.json, or loki.config.js. Review the generated settings and make sure the Storybook version and project setup match the Loki version you installed.

Example configuration shape for a package file:

{
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "loki:update": "loki update",
    "loki:test": "loki test"
  },
  "loki": {
    "configurations": {
      "chrome.laptop": {
        "width": 1366,
        "height": 768
      }
    }
  }
}

This is an illustrative configuration shape, not a guaranteed complete configuration for every Loki or Storybook release. Keep the settings generated for your installed version. The official configuration reference documents options including chromeSelector, width, height, disableAutomaticViewportHeight, and chromeEmulatedMedia.

3. Capture and compare Storybook stories

Start Storybook. For example, run your project’s Storybook command in one terminal. Confirm the configured URI and port are reachable.
Create baselines. Run yarn loki update. Loki writes reference screenshots to its configured Loki folder. Review them and commit intentional baselines to version control; Git LFS is an option if the image set is large.
Run the visual comparison. Run yarn loki test. Loki captures the stories again and compares each image to its reference.
Review failures. Inspect images in loki/current and visual differences in loki/difference. Determine whether each change is a regression or an intended UI update.
Approve intentional changes. After review, run yarn loki approve and commit the updated references.

When running Loki through Yarn or npm, put CLI flags after -- so the package manager forwards them, for example:

yarn loki test -- --requireReference

Check the syntax supported by your installed package manager and Loki version.

4. Use a static Storybook build in CI

You can point Loki at a built Storybook instead of running Storybook’s server mode. Build the static Storybook, then pass its file URI with --reactUri. A CI run can require reference images so missing baselines fail instead of silently establishing new ones:

yarn build-storybook -o storybook-static
yarn loki test -- --reactUri file:./storybook-static --requireReference

Use the build command supported by your Storybook version. Keep the build and capture environment consistent between baseline creation and CI: changes in fonts, browser rendering, dependencies, or viewport configuration can create diffs unrelated to the component change.

5. Control the capture area and viewport

Selector crop

chromeSelector selects a CSS region and crops the screenshot to that region’s dimensions. The documented default selector is #root > *. This is a crop, not a screenshot of the DOM element in isolation: absolutely positioned elements above the selected region can still appear in the crop. Choose a stable selector that exists in every story you expect Loki to capture.

Viewport height

Set width and height to control the browser viewport. disableAutomaticViewportHeight controls whether Loki increases viewport height when content extends below it. Neither setting documents a general full-page capture feature for arbitrary live-site URLs. If your Storybook story is taller than the viewport, verify the resulting image for your version and configuration instead of assuming it includes the entire document.

Media emulation and paper presets

chromeEmulatedMedia can emulate print media, and the configuration reference includes presets such as A4 Paper and US Letter Paper. These are Storybook testing configuration options. They do not establish that Loki is a print-to-PDF tool or a general website capture service.

6. Keep screenshots stable

Visual regression only helps when the same story produces stable output. Loki’s guide says it disables common CSS transitions, CSS animations, and requestAnimationFrame behavior by default and captures the transition end state. The guide identifies looped requestAnimationFrame animations, GIFs, SVG animations, native Lottie animations, and React Native Animated as limitations that may need to be disabled or controlled.

Stories that fetch data or rerender asynchronously can be captured too early. Where a story needs extra setup, use an explicit asynchronous completion signal as described in Loki’s guide. Prefer deterministic fixtures and fixed dates over changing live data. Avoid relying on an arbitrary delay when the story can signal that it is ready.

The CLI reference lists a default page-load timeout of 60,000 ms, zero default Chrome screenshot retries, and zero tolerated image difference. These are documented defaults, not universal recommendations. Confirm the values for your installed version before relying on them.

7. Troubleshooting

Symptom	Likely cause	What to check or fix
Loki cannot load the stories	Storybook is not running, the URI or port is wrong, or the static build path is incorrect.	Start Storybook yourself, confirm it is reachable, or verify the `file:` URI points to the built Storybook directory.
Test reports missing references	Baselines were not created or are not available in the checkout.	Run `loki update` intentionally, review the images, and commit the references. In CI, use `--requireReference` when missing references should fail.
Every run shows a large diff	Rendering environment or inputs differ, such as browser, fonts, viewport, data, or animation state.	Keep the capture environment and story data consistent. Disable nondeterministic animation and wait for asynchronous rendering to finish.
Screenshot is cropped unexpectedly	`chromeSelector` selects a smaller region or a selector differs across stories.	Check the selector and its dimensions. Remember that the option crops to the selector’s dimensions rather than isolating the element.
Content below the fold is absent	The capture viewport is shorter than the content, or automatic viewport-height behavior is disabled.	Review `height` and `disableAutomaticViewportHeight`. Do not treat these controls as a documented arbitrary-site full-page mode.
CLI flags appear ignored	The package manager consumed the flag rather than forwarding it to Loki.	Place forwarded flags after `--`, for example `yarn loki test -- --requireReference`.
Capture times out or is flaky	The story is slow, waits on external data, or does not signal asynchronous completion.	Make the story deterministic, provide an explicit completion signal where needed, and check the timeout setting for the installed Loki version.
Animated content differs from the reference	The animation type is among those not reliably controlled by Loki.	Disable or freeze the animation in the test story, especially looped requestAnimationFrame, GIF, SVG, Lottie, or React Native Animated content.

8. Performance, reliability, and maintenance

Loki’s workload scales with the number of stories and configured browser viewports. Limit configurations to viewports that answer a real regression question, and split a large suite across CI jobs if one run becomes too slow. Reuse stable fixtures and avoid unnecessary network dependencies so runs do not wait on changing services.

Reference images are part of the test contract. Commit reviewed updates with the code change that caused them, and inspect both the current capture and diff before approval. Avoid approving all changes automatically: an updated baseline can conceal an unintended visual regression.

Screenshot outputs and diffs consume repository or artifact storage. Git LFS can help with large reference collections. The dossier does not establish a Loki price, performance benchmark, or universal runtime; check the licensing and current documentation for your installed version before estimating project cost.

9. When the target is an arbitrary URL

For a public site URL rather than a Storybook story, use a URL screenshot API. ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL in one GET request and can return PNG, JPEG, WebP, or PDF. It is suited to one-off or automated website capture; Loki remains the fit for Storybook visual regression and reference comparisons.

Or skip the browser setup

Call ScreenshotNeo with a URL. See the ScreenshotNeo API documentation for the available parameters.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Before the shot, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, and failed loads are never billed. Its response identifies the page verdict and billing status in headers. An MCP server lets AI agents using Claude, Cursor, or another MCP client take screenshots. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Does Loki take a full-page screenshot of any website URL?

The documented Loki workflow captures Storybook stories for visual regression. It does not establish arbitrary live-URL full-page capture.

Does `chromeSelector` capture only an element?

No. It crops to the selector’s dimensions, and absolutely positioned elements above it may appear in the crop.

Can Loki run in CI without a Storybook server?

Yes. The CLI accepts a static Storybook build through --reactUri file:./storybook-static; build the Storybook first.

Should I approve every screenshot diff?

No. Inspect the current image and difference, then approve only changes that are intentional.