How to Capture Screenshots of Indian Government Websites with Loki

Direct answer: Loki is documented for taking screenshots of Storybook stories and comparing them with reference images. Its documentation does not describe navigating to an arbitrary live URL, so it does not establish a workflow for capturing a public Indian government website directly. Use Loki when you have a Storybook implementation of a page you own or are authorized to test. For a live public URL, use a browser capture workflow designed for URL-based screenshots, such as the one-call option below.

Indian government websites and applications fall within the scope of the Guidelines for Indian Government Websites (GIGW), which sets objectives including usability, user-centricity, and universal accessibility. A screenshot can document visual appearance, but it is not an accessibility audit. Do not attempt to bypass CAPTCHA or other access controls to capture a page. ScreenshotNeo is a website screenshot API and MCP server for developers; it can capture a supplied URL directly.

1. Decide whether Loki fits the page you need

What you need to capture	Does the documented Loki workflow fit?	What to do
A page represented by a Storybook story in your project	Yes	Configure Loki for the project’s Storybook, capture its stories, and review the visual differences.
An arbitrary live government website URL	Not established by the cited Loki documentation	Use a browser or URL screenshot workflow suited to live pages. Do not describe that as a Loki capability.
A government page you are rebuilding or testing in your own Storybook	Yes, for the Storybook implementation	Capture the local story. Be clear that the screenshot represents your implementation, not necessarily the live government site.

If you are documenting a public page, record enough context to identify the capture: service or page name, shareable public URL where appropriate, capture date, language, viewport, and relevant Storybook configuration. Do not expose personal information, authentication material, or citizen records in published screenshots.

2. Set up Loki for a Storybook project

The Loki getting-started guide describes installing Loki as a development dependency and integrating it with Storybook. Its stated prerequisite is Node.js 16 or newer. The documentation is dated, so check compatibility against the Node.js, Storybook, and Loki versions actually installed in your project before adopting commands or configuration unchanged.

1. Open the project that contains the Storybook stories you are authorized to test.
2. Install Loki as a development dependency using the package manager and version compatible with the project.
3. Initialize or add Loki configuration following the official getting-started instructions.
4. Keep the Storybook state and capture settings stable so successive runs are comparable.

Because package compatibility and initialization instructions can vary with installed versions, use Loki’s official guide for the exact install and initialization commands: Loki getting started. Do not copy a command from an older guide into a project without checking its package versions.

3. Capture stories, inspect differences, then approve references

Start the configured Storybook, then run Loki’s test command from the project environment. Loki captures the tested stories, compares them with reference screenshots, and places current screenshots and differences in its configured output locations.

# Start Storybook using the script configured by your project
npm run storybook

# In a second terminal, run Loki's visual test command
npx loki test

Review the current images and differences before changing references. When a visual change is intentional and has been reviewed, use Loki’s update and approve workflow as documented for your installed version. The documented approve command updates reference files from images generated in the last run; approval records an expected baseline, it does not establish that the page is correct.

# Generate or refresh screenshots according to the installed Loki CLI
npx loki update

# After inspecting the generated images, approve the intended reference update
npx loki approve

Keep generated output distinct from approved reference images. Loki’s documented defaults are .loki/current for current captures, .loki/difference for diffs, and .loki/reference for references. These paths can be configured. Avoid committing a new reference baseline until someone has reviewed the resulting images.

4. Configure repeatable captures

Visual comparisons are useful only when the page state and capture conditions are controlled. Keep the story data, browser target, viewport or capture configuration, and relevant content stable between baseline and comparison runs. If the page contains asynchronous content, determine a consistent point at which the story is ready before capture.

• Chrome load timeout: Loki exposes a Chrome load timeout setting. Increase it only when the configured page genuinely needs more time; a longer timeout cannot fix a page that never reaches the expected state.
• chromeSelector: Loki offers a selector setting that crops the screenshot to the selected dimensions. It does not isolate the selected element from absolutely positioned content that overlaps the crop area.
• Output folders: Configure current, difference, and reference paths if the defaults do not fit your repository. Preserve the distinction between generated captures and reviewed references.
• Browser and viewport: Use a consistent browser target and viewport configuration for both reference generation and later comparison. A different viewport can legitimately change wrapping, responsive layout, or visible content.

For a public government service, language, date-sensitive content, announcements, and service status may change independently of your code. Those changes can produce diffs even when your implementation is unchanged. Keep notes with the baseline about the capture context and review content changes rather than blindly approving them.

5. Interpret the result responsibly for government pages

GIGW applies to government websites and applications at central, state, district, and local levels. Its accessibility guidance discusses text alternatives for non-text content, including CAPTCHA, and says alternative CAPTCHA forms should accommodate different sensory perceptions. Do not bypass CAPTCHA or access controls to obtain an image.

A screenshot shows pixels at a particular viewport and moment. It does not prove that a screen reader can interpret the page, that keyboard navigation works, that text alternatives exist, or that a CAPTCHA has an accessible alternative. Retain an accessible text or document version where appropriate, and describe what the screenshot does and does not show.

6. Troubleshooting Loki captures

Symptom	Likely cause	What to check
Loki does not capture a public URL you provide	The documented workflow targets Storybook stories; arbitrary URL navigation is not established in the Loki docs.	Represent the page in an authorized Storybook story, or use a URL-based browser capture workflow for the live site.
No screenshots appear or the run cannot connect to Storybook	Storybook is not running, Loki is pointed at the wrong configured Storybook target, or project versions/configuration do not match.	Confirm Storybook starts successfully, inspect Loki configuration, and verify the installed Loki/Storybook compatibility instructions.
Capture times out	The browser does not finish loading within the configured Chrome timeout, or the page/story remains pending.	Check that the story renders and settles, then adjust the documented load timeout if the content legitimately needs longer.
Large or unexpected area appears in a selector crop	chromeSelector crops to the selected dimensions but does not remove overlapping absolutely positioned content.	Inspect overlapping elements and layout, or choose a crop area whose dimensions produce the intended image.
Many diffs appear after a small change	Story data, viewport, browser target, dynamic content, or loading state differs from the reference run.	Stabilize those inputs and inspect the generated current and difference images before updating references.
A CAPTCHA or bot check blocks the page	The site is enforcing an access control or human verification step.	Do not defeat it. Use an authorized test environment or document the limitation without claiming a successful page capture.

7. Or skip the browser setup

For a live page URL, ScreenshotNeo can return an image or PDF from one GET request. Its API documentation is at screenshotneo.com/docs. The following examples capture a public Indian government landing page; replace the URL with the public page you are authorized to document.

cURL

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

Python

import requests

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

Node.js

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

ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. See the API documentation and sign up free for 1,000 screenshots a month, no card required.

8. Performance, reliability, and cost considerations

With Loki, capture time depends on the configured Storybook, browser startup and loading, and the number of stories under test; the reviewed documentation provides no benchmark to predict a run time. Keep the tested story set focused on pages that need visual regression coverage, and avoid making approval an automatic response to every diff. Use a stable test environment and preserve references so a later change can be reviewed against the same baseline.

For live URL capture, account for page loading variability, network conditions, and public-site changes. A timeout should be treated as a failed capture rather than evidence that the site is blank or correct. ScreenshotNeo’s stated billing behavior excludes bot checks, blank pages, timeouts, failed loads, and cache hits. Its listed monthly plans are Free: 1,000; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Check the product site for current details before choosing a plan.

FAQ

Can Loki screenshot any Indian government website from its URL?

The reviewed Loki documentation describes Storybook story capture and visual regression. It does not document arbitrary live URL capture.

Does a Loki screenshot prove a government page is accessible?

No. It records a visual state. Accessibility requires checks beyond a screenshot, including the page’s non-visual content and interaction support.

Should I approve every Loki difference to make the build pass?

No. Review the current capture and diff first; approve only an intentional and understood baseline change.

Can I capture a CAPTCHA challenge by bypassing it?

No. Do not defeat CAPTCHA or other access controls. Use an authorized test environment or record that the page could not be captured.